BAB 2: Sintaks CSS

Di Bab 1, kamu sudah melihat bagaimana beberapa baris CSS bisa mengubah halaman HTML yang polos menjadi sesuatu yang jauh lebih hidup. Tapi saat itu kita belum bicara soal aturan penulisannya — kenapa ada tanda titik dua di sana, kenapa ada titik koma, kenapa ada kurung kurawal. Semua tanda baca itu bukan hiasan: mereka adalah bagian dari sintaks CSS yang membuat browser bisa membaca dan menerapkan gaya yang kamu tulis.

Sintaks CSS itu sederhana secara struktural, tapi kamu perlu paham setiap bagiannya sebelum melangkah lebih jauh. Satu tanda baca yang hilang bisa membuat satu blok CSS tidak berfungsi sama sekali — dan browser tidak akan memberi pesan error yang jelas.

Anatomi Sebuah Rule CSS

Satuan dasar CSS disebut rule (atau ruleset). Setiap rule terdiri dari dua bagian utama: selektor dan declaration block.

Biar lebih konkret, perhatikan rule CSS ini:

Bagian h1 adalah selektor — ia menarget semua elemen <h1> di halaman. Seluruh bagian di dalam kurung kurawal {} adalah declaration block. Di dalamnya ada dua deklarasi: color: #1a56db dan font-size: 2rem.

Setiap deklarasi punya dua komponen: properti (di kiri titik dua) dan nilai (di kanan titik dua). Properti adalah nama fitur yang ingin diubah — color, font-size, margin, dan seterusnya. Nilai menentukan bagaimana fitur itu diterapkan.

Deklarasi: Properti dan Nilai

Satu deklarasi selalu mengikuti format ini:

Titik dua : memisahkan properti dari nilainya. Titik koma ; mengakhiri setiap deklarasi. Jika kamu lupa titik koma di akhir deklarasi terakhir sebelum kurung kurawal penutup, browser biasanya masih bisa membacanya — tapi kebiasaan menutup setiap deklarasi dengan titik koma jauh lebih aman, terutama ketika kamu menambahkan deklarasi baru di baris berikutnya.

Spasi di sekitar tanda titik dua dan titik koma diabaikan oleh browser. Baris-baris ini semua valid:

Tapi konvensi yang paling umum dan paling mudah dibaca adalah properti: nilai; — satu spasi setelah titik dua, tidak ada spasi sebelumnya.

Selektor: Menarget Elemen yang Tepat

Selektor adalah instruksi kepada browser: "terapkan semua deklarasi berikut ke elemen-elemen ini." Di Bab 1 kita sudah pakai tiga selektor dasar: body, h1, dan p. Ketiga itu disebut type selector — mereka menarget elemen berdasarkan tag HTML-nya.

Satu selektor bisa menarget satu jenis elemen saja, tapi bisa juga menarget beberapa elemen sekaligus dengan memisahkan selektor menggunakan koma:

Rule di atas menerapkan gaya yang sama ke semua elemen heading level 1, 2, dan 3. Ini jauh lebih efisien daripada menulis tiga rule terpisah dengan isi yang identik.

Beberapa Deklarasi dalam Satu Block

Tidak ada batasan berapa banyak deklarasi yang bisa kamu tulis dalam satu declaration block. Browser akan membaca dan menerapkan semuanya:

Semua elemen dengan class kartu akan mendapat semua enam gaya sekaligus. Perhatikan bahwa setiap deklarasi ditulis di baris tersendiri — ini konvensi yang hampir universal karena jauh lebih mudah dibaca dibanding menulisnya dalam satu baris:

Whitespace dan Case Sensitivity

CSS sebagian besar case-insensitive untuk nama properti dan nilai keyword. Artinya COLOR: RED, color: red, dan Color: Red dianggap sama. Tapi ada pengecualian: nilai seperti URL file, nama font, dan nama class/ID bersifat case-sensitive karena bergantung pada sistem file atau konvensi HTML.

Spasi, tab, dan baris kosong di antara rule diabaikan sepenuhnya. Kamu bebas menggunakan spasi untuk membuat kode lebih mudah dibaca:

Baris kosong di antara rule dan komentar di atas grup rule adalah praktik yang baik — terutama saat file CSS mulai tumbuh menjadi ratusan baris.

Komentar di CSS

Komentar CSS ditulis dengan /* sebagai pembuka dan */ sebagai penutup. Bisa ditulis dalam satu baris atau beberapa baris:

Komentar tidak mempengaruhi cara CSS bekerja — browser mengabaikannya sepenuhnya. Gunakan komentar untuk menjelaskan keputusan desain yang tidak langsung kentara dari kode, atau untuk mengelompokkan section dalam file CSS yang panjang.

Latihan

Coba terapkan pemahaman sintaks ini ke kode yang sudah kita buat di Bab 1:

1. Buka file profil.html yang dibuat di Bab 1. Pisahkan CSS-nya ke file eksternal profil.css dan hubungkan ke HTML menggunakan tag <link>. Pastikan hasilnya tetap sama.

2. Tambahkan selektor gabungan ke profil.css untuk menarget h1 dan h2 sekaligus, lalu beri keduanya font-weight: 700 dan letter-spacing: -0.5px. Jika belum ada elemen <h2> di HTML, tambahkan satu.

3. Coba hapus titik koma dari salah satu deklarasi di tengah declaration block — bukan yang terakhir. Amati di browser apa yang terjadi pada deklarasi yang kehilangan titik koma dan deklarasi setelahnya. Ini cara cepat untuk membuktikan sendiri mengapa titik koma itu penting.

Struktur yang sudah kamu pahami di bab ini — selektor, declaration block, properti, dan nilai — adalah pola yang akan berulang ribuan kali sepanjang kamu menulis CSS. Bab selanjutnya akan memperluas pemahaman tentang selektor: selain menarget elemen berdasarkan tag HTML, CSS punya cara yang jauh lebih presisi untuk memilih elemen mana yang ingin diberi gaya.

Referensi

1. 1 MDN Web Docs — CSS Syntax
2. 2 MDN Web Docs — Introduction to CSS Syntax: Declarations, Rulesets, and Statements
3. 3 W3C — CSS 2.2 Specification: Syntax and Basic Data Types