CARA KERJA CSS

CSS atau Cascading Style Sheets adalah bahasa yang digunakan untuk mendesain tampilan sebuah website. CSS bertugas untuk mengubah bentuk, ukuran, posisi, wara, dan elemen-elemen lainnya pada website sesuai dengan keinginan desainer web. Lalu, bagaimana cara kerja CSS itu sendiri? Mari kita bahas lebih lanjut.

Selektor CSS

Cara pertama yang perlu kamu ketahui tentang cara kerja CSS adalah dengan memahami selektor CSS. Selektor adalah cara CSS mengetahui elemen HTML mana yang akan diberi style. Ada beberapa jenis selektor di CSS, diantaranya:

Selektor Elemen

Selektor elemen memilih elemen berdasarkan namanya. Misalnya, untuk mengubah semua teks paragraph di halaman web kamu menjadi warna merah, kamu bisa menggunakan kode berikut:

p {
  color: red;
}

Selektor Kelas

Selektor kelas memilih elemen berdasarkan kelasnya. Misalnya, jika kamu ingin membuat teks dengan kelas “highlight” berwarna kuning, kamu bisa menuliskan kode berikut:

.highlight {
  color: yellow;
}

Selektor ID

Selektor ID bekerja sedikit berbeda. ID adalah atribut unik, yang berarti hanya bisa digunakan sekali dalam satu halaman. Kode berikut akan membuat elemen dengan ID “judul” memiliki font berukuran besar:

#judul {
  font-size: 32px;
}

Properties CSS

Setelah kamu memilih elemen mana yang akan diganti style-nya, langkah selanjutnya adalah menentukan style apa yang ingin diubah. Ini dilakukan dengan properties CSS. Properties adalah cara CSS mengubah style elemen, seperti warna, font, ukuran, dan lainnya. Misalnya:

p {
  color: red;
  font-size: 16px;
}

Kode di atas mengubah warna teks paragraf menjadi merah dan ukuran fontnya menjadi 16px.

Aturan Penulisan Kode CSS

Sangat penting untuk memahami aturan penulisan kode CSS agar browser bisa mengerti apa yang ingin kamu ubah. Aturan penulisan kode CSS umumnya melibatkan selektor, properties, dan nilai properties, yang ditulis dalam struktur berikut:

selektor {
  properties: nilai;
}