Selector, Property, dan Value

Pada chapter sebelumnya kita sudah melihat sekilas bentuk kode CSS. Sekarang saatnya membedahnya: setiap aturan CSS, dari yang paling sederhana sampai yang mengatur layout halaman utuh, selalu tersusun dari tiga peran yang sama, yaitu selector, property, dan value. Ketiganya bekerja sebagai satu tim: selector menentukan elemen mana yang disentuh, property menamai aspek tampilan yang ingin diubah, dan value menetapkan nilai barunya. Pada chapter ini kita membedah ketiganya satu per satu, lengkap dengan diagram anatomi dan demo yang bisa langsung dicoba.

Anatomi Satu Aturan CSS #

Perhatikan aturan berikut, bentuk yang paling sering ditemui di mana-mana:

h1 {
  color: #1f6f54;
}

Diagram berikut menandai setiap bagian pentingnya:

h1  {  color: #1f6f54; }
│   │   │      │      │
│   │   │      │      └─ titik koma menutup setiap declaration
│   │   │      └─ value: nilai yang diterapkan pada property
│   │   └─ property: nama aspek tampilan yang diatur
│   └─ sepasang kurung kurawal membentuk declaration block
└─ selector: pola yang memilih elemen target

Cara membaca aturan di atas: “pilih semua elemen h1, lalu terapkan deklarasi color dengan nilai #1f6f54”. Perhatikan pembagian wilayahnya: bagian di luar kurung kurawal selalu selector, dan bagian di dalam kurung selalu kumpulan declaration. Pembagian ini tidak pernah berubah di seluruh CSS.

Selector: Menentukan Elemen Target #

Selector adalah pola yang dicocokkan browser terhadap struktur halaman. Browser membaca selector, mencari semua elemen yang cocok, lalu menerapkan declaration block pada elemen-elemen tersebut. Dua selector paling dasar:

/* Element selector: menyasar semua elemen <p> */
p {
  line-height: 1.6;
}

/* Class selector: menyasar elemen yang ber-class="prolog" */
.prolog {
  font-size: 18px;
}

Penerapan keduanya pada paragraf nyata:

CSS menyediakan banyak jenis selector lain — attribute, pseudo-class, kombinator — dan semuanya menempati posisi yang sama, yaitu di depan kurung kurawal. Jenis-jenis selector itu kita bahas mendalam pada section Selectors.

Property: Nama Aspek yang Diatur #

Property adalah nama resmi untuk satu aspek tampilan: warna teks (color), ukuran huruf (font-size), jarak di dalam elemen (padding), dan ratusan lainnya. Dua hal penting perlu digarisbawahi:

• Hanya nama yang didefinisikan spesifikasi CSS yang sah. color sah; colour bukan property CSS, meskipun artinya benar dalam bahasa Inggris. Browser tidak menampilkan pesan galat untuk property tak dikenal; deklarasi itu hanya diabaikan. Perilaku ini kita bedah di chapter penutup section ini.
• Penulisan property tidak peka huruf besar-kecil, tetapi konvensi yang diikuti hampir semua tim adalah huruf kecil semua, dengan tanda hubung untuk nama panjang: font-size, background-color.

Value: Menetapkan Nilai #

Value adalah nilai yang kita tetapkan untuk property. Setiap property menerima jenis nilai tertentu; memasukkan jenis yang tidak cocok membuat deklarasi diabaikan. Penulisan font-size: red; tidak berarti apa-apa karena font-size menuntut ukuran, bukan warna.

Jenis value yang paling sering dipakai:

Lima Property untuk Memulai #

Tidak perlu menghafal ratusan property sekaligus. Lima berikut sudah cukup untuk banyak eksperimen awal:

Demo berikut merangkai ketiga peran dengan kelima property pada tabel di atas. Coba ubah nilai salah satu property untuk merasakan perannya masing-masing:

Mari kita telaah demonya:

1. .prolog: selector class yang memilih elemen <p> di bawahnya.
2. color: #14503a;: property color mengatur warna teks; value berupa kode warna heksadesimal.
3. background-color: #f4fbf7;: memberi latar hijau muda pada kotak paragraf.
4. font-size: 18px;: memperbesar huruf menjadi 18 piksel, lebih lega daripada bawaan browser.
5. padding: 16px 20px;: memberi jarak di dalam kotak, 16px untuk atas-bawah dan 20px untuk kiri-kanan.

Ringkasan #

Selector memilih elemen, property menamai aspek tampilan, dan value menetapkan nilainya — tiga peran ini membentuk satu aturan CSS yang lengkap. Browser mengabaikan deklarasi yang nama property atau nilainya tidak sah, sehingga ketepatan ejaan menentukan apakah gaya muncul atau tidak. Chapter berikutnya menajamkan kosakata kita: perbedaan antara declaration, declaration block, dan rule.