cssdasarsintaksPemula4 mnt baca

Sintaks Aturan CSS

Bedah anatomi aturan CSS: selektor, deklarasi, properti, nilai, dan cara menulis komentar yang rapi.

Anatomi satu aturan

Setiap aturan CSS terdiri dari dua bagian besar: selektor dan blok deklarasi.

css

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

p adalah selektor: elemen target.
color: blue; adalah satu deklarasi: pasangan properti + nilai yang diakhiri titik koma.
Kurung kurawal { } membungkus semua deklarasi milik selektor itu.

Satu aturan boleh punya banyak deklarasi. Tulis tiap deklarasi di baris sendiri biar gampang dibaca.

Properti dan nilai

CSS punya ratusan properti, tapi polanya selalu sama. Nilai bisa bermacam-macam bentuk:

css

.kartu {
  width: 300px;          /* panjang */
  color: #333;           /* warna */
  border: 2px solid red; /* singkatan: lebar + gaya + warna */
  opacity: 0.9;          /* angka desimal */
}

Beberapa properti menerima shorthand (singkatan), seperti border di atas yang menggabungkan tiga nilai sekaligus. Shorthand menghemat baris tapi pastikan kamu paham urutannya.

Komentar

Catatan untuk manusia, diabaikan browser:

css

/* ===== Bagian header ===== */
header {
  background: white;
}

Komentar tidak bisa bersarang dan tidak boleh dipakai untuk "menonaktifkan" kode secara permanen di project nyata. Pakai komentar untuk menjelaskan kenapa, bukan apa (kodenya sudah jelas menunjukkan apa).

Catatan teknis: lupa titik koma di akhir deklarasi adalah error klasik. Browser akan menggabungkan baris berikutnya ke deklarasi yang rusak itu, dan keduanya gagal total. Kalau style tiba-tiba tidak jalan, cek titik koma dulu.

Kenapa polanya selalu sama?

Semua aturan CSS mengikuti pola selektor-properti-nilai tanpa kecuali. Ini disengaja: browser harus mem-parsing jutaan aturan dalam milidetik, dan manusia harus membaca kode orang lain tanpa belajar dialek baru tiap project. Konsistensi pola membuat CSS bisa dipelajari sekali dan dipakai selamanya.

Analogi: seperti format surat resmi (kepala, isi, penutup). Isinya bebas, tapi strukturnya selalu sama sehingga siapa pun langsung tahu cara membacanya.

Contoh bertahap: dari satu ke banyak

Satu selektor, satu deklarasi:

css

h1 {
  color: navy;
}

Beberapa selektor sekaligus (pisahkan koma), dan beberapa deklarasi:

css

h1, h2, h3 {
  color: navy;
  line-height: 1.3;
  margin-bottom: 16px;
}

Koma berarti "atau": aturan berlaku untuk h1 ATAU h2 ATAU h3. Ini menghemat duplikasi tiga aturan terpisah.

Kesalahan umum pemula

Salah: salah ketik nama properti. Browser diam-diam mengabaikan properti yang tidak dikenal, tanpa pesan error!

css

/* SALAH: tidak ada error, tapi juga tidak berpengaruh */
.kartu {
  colour: red;      /* harusnya color */
  font-szie: 16px;  /* harusnya font-size */
}

Buka DevTools (F12): properti salah ketik biasanya ditampilkan dengan coretan atau peringatan segitiga.

Salah: kurung kurawal tidak seimbang. Satu } yang hilang merusak semua aturan di bawahnya. Kebiasaan baik: ketik {} berpasangan dulu, baru isi tengahnya.

Salah: titik dua vs titik koma tertukar.

css

/* SALAH */
p {
  color; blue;  /* harusnya color: blue; */
}

Pola yang benar selalu properti: nilai; (titik dua memisahkan, titik koma mengakhiri).

Latihan kilat

Tulis aturan untuk class kartu: lebar 300px, padding 20px, background putih, border 1px solid abu-abu. Tiap deklarasi di baris sendiri.
Gabungkan: buat SATU aturan yang menarget h1, h2, h3 sekaligus dengan warna navy dan margin-bottom 12px.
Temukan bug: p { colour: red font-size: 16px } (tiga kesalahan!). Perbaiki semuanya.

Kunci: (1) .kartu { width: 300px; padding: 20px; background: white; border: 1px solid #ccc; }. (2) h1, h2, h3 { color: navy; margin-bottom: 12px; }. (3) colour harusnya color, kurang titik koma setelah red, kurang titik koma setelah 16px.

Istilah kunci

Selektor: penunjuk elemen target di awal aturan.
Deklarasi: pasangan properti + nilai yang diakhiri titik koma.
Properti: aspek yang diubah (misal color, width).
Nilai: hasil yang diinginkan (misal red, 200px).
Shorthand: properti singkatan yang menggabungkan beberapa nilai sekaligus.

Rangkuman

Aturan = selektor + blok deklarasi. Deklarasi = properti: nilai;. Akhiri tiap deklarasi dengan titik koma dan pakai komentar untuk menjelaskan alasan di balik kode.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Perbaiki Deklarasi Rusak

Hapus titik koma di akhir background: #f0f9ff pada playground, amati apa yang terjadi pada kartu. Lalu kembalikan titik komanya dan tambahkan komentar di atas aturan .kartu yang menjelaskan fungsinya.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Halo CSS</h1>
<p>Edit styles.css dan lihat hasilnya.</p>
</body>
</html>

Open Sandbox