Sintaks CSS

CSS memiliki tata tulis yang kecil: seluruh bahasa berputar pada satu pola, yaitu menunjuk elemen lalu menyatakan properti yang diubah. Karena polanya seragam, kemampuan membaca satu aturan dengan tepat langsung berlaku untuk ribuan properti lainnya. Sebaliknya, satu tanda kurung kurawal yang terbalik dapat membuat seluruh aturan gagal terurai oleh parser. Pada Chapter ini kita membedah anatomi aturan, aturan komentar dan whitespace, pasangan shorthand-longhand, serta cara parser memperlakukan kode yang salah.

Anatomi Sebuah Aturan CSS #

Satu aturan (rule) terdiri dari dua bagian: selector yang menunjuk elemen, dan declaration block berisi nol atau lebih deklarasi di antara kurung kurawal. Setiap deklarasi terdiri dari nama properti, tanda titik dua, satu nilai, dan diakhiri titik koma sebagai pemisah.

css
/* Aturan: selector + declaration block */
.kartu-profil {
  width: 280px;                          /* deklarasi 1: properti + nilai */
  color: rgb(194, 65, 12);               /* deklarasi 2 */
  background-color: rgb(255, 237, 213);  /* deklarasi 3 */
  border-radius: 10px                    /* deklarasi terakhir: titik koma boleh ditiadakan */
}

Mari kita telaah pola di atas:

Baris 3 (.kartu-profil {): selector menunjuk elemen dengan class kartu-profil; kurung kurawal membuka declaration block. Selector dapat berupa tipe elemen (p), class (.kartu), ID (#header), atau gabungannya — detailnya kita bahas pada Chapter selector.
Baris 4–6: tiga deklarasi lengkap. Nama properti dipisah dari nilai oleh titik dua; satu spasi di sekelilingnya tidak diwajibkan, tetapi memudahkan pembacaan.
Baris 7 (border-radius: 10px): titik koma pada deklarasi terakhir sebelum } sebenarnya opsional. Biasakan tetap menulisnya agar menambah deklarasi baru tidak melupakan pemisah.
Baris 1 (komentar): baris yang diawali /* dan diakhiri */ tidak diurai sebagai kode.

Beberapa aturan dapat ditulis berurutan dalam satu stylesheet, dan satu selector dapat menunjuk banyak elemen sekaligus dengan selector list:

css
h2,
h3 {
  font-weight: 700;
}

Selector list h2, h3 berarti “cocok untuk elemen <h2> atau <h3>”. Kedua selector dalam list bersifat independen; kegagalan salah satunya membuat seluruh aturan diabaikan parser, sehingga menulis koma yang tertinggal lebih aman daripada selector yang salah ketik.

Komentar, Whitespace, dan Case-Sensitivity #

Komentar CSS hanya mengenal satu bentuk: /* ... */. Komentar tidak boleh bersarang, sehingga satu penutup */ yang salah tempat dapat memotong kode setelahnya. Manfaatkan komentar untuk memberi judul pada kelompok aturan:

css
/* ====== Kartu profil ====== */
.kartu-profil { border-radius: 10px; }

/* catatan: nilai px dibahas pada Chapter values dan units */

Whitespace — spasi, tab, dan baris baru — diperlakukan longgar oleh CSS. Parser hanya menuntut pemisah yang bermakna: titik dua antara properti dan nilai, serta titik koma antardeklarasi. Karena itu, formatter dan tim kita bebas memilih gaya penulisan (indentasi, satu deklarasi per baris) tanpa mengubah hasil; topik ini kita perdalam pada Chapter CSS Validation dan Formatting .

Soal huruf besar dan kecil, pembagiannya perlu diingat dengan tepat. Nama properti, nilai keyword (red, bold), dan selector tipe elemen (H1 sama dengan h1) tidak peka huruf. Sebaliknya, nilai class dan ID mengikuti HTML sehingga peka huruf: .Kartu dan .kartu adalah dua selector yang berbeda. Khusus custom properties yang diawali --, namanya juga peka huruf.

Shorthand dan Longhand #

Banyak properti memiliki dua bentuk penulisan. Bentuk longhand menyatakan satu sisi saja (margin-top), sedangkan bentuk shorthand merangkum beberapa properti dalam satu deklarasi (margin). Shorthand yang diberi beberapa nilai akan diurai browser menjadi longhand-nya:

css
.kartu {
  padding: 12px 20px;
  /* setara dengan:
  padding-top: 12px;
  padding-right: 20px;
  padding-bottom: 12px;
  padding-left: 20px;
  */
}

Shorthand	Longhand yang dirangkum	Catatan urutan nilai
`margin`, `padding`	empat sisi (top, right, bottom, left)	satu nilai = semua sisi; dua nilai = atas-bawah, kiri-kanan
`border`	width, style, color	tiga komponen boleh ditulis dalam urutan bebas
`background`	color, image, position, size, repeat, dan lainnya	bagian yang tidak disebut kembali ke nilai awal
`font`	style, variant, weight, size, line-height, family	wajib memuat size dan family
`flex`	grow, shrink, basis	dibahas pada Chapter flexbox

Deklarasi Tidak Valid dan Sifat Parser yang Toleran #

CSS dirancang agar halaman tidak berhenti tampil karena satu kesalahan kecil. Ketika parser menemui deklarasi yang tidak dapat dipahami — salah nama properti, nilai yang tidak sesuai, atau tanda baca yang hilang — parser melewati deklarasi tersebut sampai titik koma berikutnya, lalu melanjutkan aturan yang sama seolah tidak terjadi apa pun. Aturan lain pun tetap berjalan.

css
.kartu {
  width: 280px;
  colr: rgb(194, 65, 12);        /* salah nama properti: diabaikan parser */
  color: rgb(194, 65, 12);       /* deklarasi berikutnya tetap diterapkan */
  padding: 12px 20px;
  background-color: rgb(255, 237, 213);
  border-radius: 10px;
}

Hasil di Browser:

text
Kartu tampil selebar 280px dengan latar rgb(255, 237, 213) dan sudut
membulat 10px. Shorthand padding: 12px 20px menghasilkan padding atas
12px dan padding kiri 20px. Baris colr yang salah nama diabaikan parser,
sedangkan deklarasi sesudahnya tetap berjalan sehingga teks kartu
berwarna rgb(194, 65, 12) dan judulnya tebal dengan ukuran 20px.

Perilaku ini bersifat dua sisi. Sisi baiknya, satu kesalahan tidak merusak stylesheet lain. Sisi sulitnya, kesalahan tidak memunculkan pesan di console; gejalanya hanyalah gaya yang tidak muncul. Untuk kasus seperti colr di atas, panel Styles di browser DevTools menandai deklarasi tak dikenal dengan ikon peringatan dan mencoretnya — teknik membacanya kita praktikkan pada Chapter Browser DevTools .