Apa Itu CSS? Pengertian, Fungsi, dan Contohnya

 

Apa Itu CSS?

Pengertian CSS dan Contohnya - AneIqbal

CSS adalah singkatan dari cascading style sheets, yaitu bahasa yang digunakan untuk menentukan tampilan dan format halaman website. Dengan CSS, Anda bisa mengatur jenis font, warna tulisan, dan latar belakang halaman.

CSS digunakan bersama dengan bahasa markup, seperti HTML dan XML untuk membangun sebuah website yang menarik dan memiliki fungsi yang berjalan baik.

Apa Fungsi CSS?

Secara umum, CSS berfungsi untuk mengatur tampilan halaman website berbasis HTML atau bahasa markup lainnya. Tapi, masih ada beberapa fungsi CSS lainnya, yaitu:

1. Mempercepat Loading Halaman Web

Bisa menuliskan satu rangkaian kode untuk beberapa halaman website sekaligus, jumlah kode bisa diminimalkan.


2. Memudahkan Pengelolaan Kode

Sebagai contoh, Anda ingin mengubah latar belakang semua halaman website. Maka, cukup edit kode CSS terkait latar belakang, perubahan itu akan diterapkan di semua halaman.

3. Menawarkan Lebih Banyak Variasi Tampilan

 Contohnya, Anda bisa menggunakan CSS untuk membuat tombol dengan warna yang Anda inginkan.

4. Membuat Website Tampil Rapi di Semua Ukuran Layar

CSS memiliki berbagai property untuk mengatur tampilan konten sesuai kebutuhan layar, misalnya dengan max-width. Ketika menggunakan property ini mengubah ukuran elemen HTML sesuai ukuran layar yang digunakan untuk menampilkan website.

Jenis Jenis CSS yang Perlu Anda Ketahui


1. Inline CSS

Inline CSS adalah kode CSS yang dituliskan di dalam file HTML. Jenis CSS ini hanya mempengaruhi satu baris kode HTML.

Perhatikan baris kode di bawah ini sebagai contohnya:

<h1 style="font-size:30px;color:blue;">Cek beritama utama ini!</h1>

2. Internal CSS

Internal CSS dituliskan di bagian header file HTML. Fungsinya untuk menentukan tampilan sebuah halaman. 
<head>
<style>
Body  { background-color:blue;  }
P  { font-size:20px;  color:white;  }
</style>
</head>

<p>Ini adalah contoh kalimat.</p>



3. External CSS
Sesuai namanya, external CSS adalah kode CSS yang diletakkan di luar dokumen HTML sebagai file .css. Jenis CSS ini berfungsi untuk mengatur tampilan semua halaman website yang Anda tentukan. Jadi, external CSS berguna ketika Anda ingin mengatur tampilan beberapa halaman sekaligus.

<head>
<link rel="stylesheet"  type="text/css"  href=fileCSSAnda.css">
</head>

Dengan kode tersebut, halaman website Anda akan menggunakan fileCSSAnda.css untuk mengatur tampilannya.
5+ Contoh CSS
1. Menentukan Format Paragraf
emua paragraf dalam sebuah halaman website berukuran 120% dan berwarna abu tua, Anda cukup menambahkan kode di bawah ini:
p { font-size: 120%; color: dimgray; }
 Sebagai catatan, warna link yang ditentukan dengan CSS ada empat, yaitu:
  • Normal: warna link yang belum pernah dibuka dan tidak diklik
  • Visited: warna link yang sudah pernah dibuka
  • Hover: warna ketika Anda meletakkan kursor di atas link
  • Active: warna link ketika Anda klik
Untuk menentukan keempat warna itu, gunakan kode di bawah ini dan ketikkan warna yang Anda inginkan setelah color:.
a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }
3. Menentukan Huruf Kapital/Kecil
Ingin agar sebuah paragraf berisi huruf kecil saja? Anda tinggal mengganti “Paragraf Anda” di kode berikut ini dengan teks yang diinginkan:
<p class="smallcaps">Paragraf Anda.</p>
4. Membuat Kotak Teks
CSS juga memungkinkan Anda membuat kotak teks. Umumnya, kotak teks digunakan untuk menonjolkan sebuah informasi penting. Untuk melakukannya, gunakan contoh CSS ini:
p.important { border-style: solid; border-width: 5px; border-color: purple; }
Kode tersebut akan menambahkan kotak dengan border berukuran 5px dan warna ungu di sekitar teks yang Anda tandai dengan class important. Untuk menandai teks dengan class itu, tambahkan kode berikut ini:
<p class="important">Paragraf Anda.</p>
Link akan terlihat lebih mencolok jika diletakkan dalam sebuah tombol. Untuk membuatnya dengan CSS, gunakan kode di bawah ini:
a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }
Supaya Anda tahu apa saja fungsi dari bagian-bagian kode tersebut, simak penjelasan berikut ini:
  • a:link, a:visited, a:hover, a:active memastikan bahwa tombol Anda akan selalu tampil meski sudah diklik atau ditunjuk dengan kursor. 
  • background-color menentukan warna tombol.
  • padding menentukan ukuran tombol.
  • text-align menentukan letak teks dalam tombol, misalnya di pinggir atau di tengah.
  • text-decoration menentukan ada atau tidaknya garis bawah di teks.
  • display: inline-block memungkinkan Anda untuk mengatur tinggi dan lebar tombol.
6. Meng-highlight Baris dalam Tabel
Jika ingin agar baris dalam sebuah tabel memiliki warna berbeda ketika ditunjuk dengan kursor, Anda bisa menambahkan contoh CSS berikut ini:
tr:hover { background-color: #ddd; }

Setelah background-color: Anda cukup mengganti #ddd dengan kode warna CSS. Cek daftar kode warna CSS apabila Anda belum tahu.
Setelah background-color: Anda cukup mengganti #ddd dengan kode warna CSS. Cek daftar kode warna CSS apabila Anda belum tahu.


Comments

Post a Comment

Popular posts from this blog

3 Contoh Flowchart Percabangan beserta programnya

Image
    Percabangan sederhana adalah percabangan yang tidak terdapat banyak perintah yang akan dikerjakan, atau kondisi lain yang harus dipenuhi. Biasanya percabangan sederhana hanya memiliki sebuah kondisi. didalam pemrograman kita mengenal percabangan IF ELSE. Berikut ini contoh flowchartnya. Penjelasan: Pada flowchart diatas, kita mulai dari simbol Terminal untuk memulai program percabangan. Kemudian terdapat simbol arue (flow) yang berjalan menuju simbol kondisi ( decission ) dimana terdapat kondisi yang telah ditentukan yaitu; 2 Modulus 2 hasilnya adalah 0. Apabila kondisi tersebut bernilai benar ( true ) maka akan menuju pada simbol output untuk menampilkan kalimat ‘ Bilangan Genap ‘ namun apabila bernilai salah ( false ) maka akn menampilkan output ‘ Bilangan Ganjil ‘ kemudian selanjutnya baik kondisi benar(true) maupun salah (false) akan langsung berakhir. Contoh Program PHP <? php if ( 2 % 2 == 0 ){ echo "Bilangan Genap" ; } else { echo "Bilangan
Read more

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Image
 LOOPING L ooping adalah sebuah urutan perintah yang secara menerus diulang hingga suatu kondisi tercapai.  Pernyataan aliran kontrol yang memungkinkan kode dieksekusi berulang kali berdasarkan kondisi Boolean yang diberikan. Perulangan while dapat dianggap sebagai pernyataan if yang berulang. Jenis-Jenis Looping Terdapat dua jenis  loop yaitu : Entry controlled loop Exit controlled loop entry controlled loop,  sebuah kondisi dieksekusi sebelum sebuah badan dari loop. Hal ini juga disebut sebagai   pre-checking loop Exit Controlled Loops Loops  yang kondisi pengujiannya diuji atau dievaluasi pada akhir badan  loop While Loop   While loop  adalah loop yang paling mudah untuk digunakan.Contoh dari loop ini adalah;while (condition) { statements; } merupakan loop jenis  entry-controlled  dimana  loop  ini dievaluasi atau diperiksa sebelum diproses dari badan dari sebuah loop.  Algoritma  while loop     Dalam  while loop , jika kondisi tidak benar, makan badan dari loop tidak akan dieksekus
Read more

Mengenal KOTLIN

Image
                         Kotlin   adalah bahasa pemrograman open-source yang dikembangkan oleh JetBrains untuk berbagai platform. Tapi,  bahasa pemograman   ini semakin populer digunakan untuk membangun aplikasi Android. Bahasa Kotlin berjalan pada platform Java Virtual Machine (JVM), sebuah platform yang memungkinkan komputer menjalankan kode berbasis  Java , atau kode dari bahasa lain yang dikompilasi (compile) menggunakan Java. Artinya, Kotlin bisa menerapkan mekanisme compile pada Java, yaitu menulis kode lalu menjalankannya di platform yang mendukung (Write Once Run Anywhere). Bahkan, Kotlin juga bisa digunakan bersama dengan Java. Dengan kata lain, Anda bisa menggunakan Kotlin dan Java sekaligus untuk membangun satu aplikasi Android. Contohnya, Anda bisa menggunakan Kotlin untuk membuat satu halaman aplikasi, sementara halaman lainnya ditulis menggunakan Java. Kedua bahasa tersebut tidak akan bentrok satu sama lain karena menghasilkan output file yang sama. Sejarah Perkembangan K
Read more