1. 4 Lapisan CSS Box Model
Setiap elemen di halaman web (bahkan yang berbentuk lingkaran) dianggap sebagai kotak persegi empat oleh browser. Kotak ini terdiri dari 4 lapisan konsentris:
Lapisan Box Model (Dari Dalam ke Luar)
1. **Content**: Area tempat teks atau gambar berada.
2. **Padding**: Ruang kosong transparan di antara konten dan border (di dalam kotak).
3. **Border**: Garis tepi pembatas kotak (bisa diberi warna dan ketebalan).
4. **Margin**: Jarak spasi kosong pemisah antara kotak ini dengan elemen tetangganya di luar.
Wajib: 'box-sizing: border-box'
Secara default (`content-box`), jika kamu memberi width 200px + padding 20px, total lebar kotak membengkak jadi 240px! Dengan mengatur `* { box-sizing: border-box; }`, padding dan border akan dihitung ke dalam width 200px tersebut sehingga layout tidak mudah hancur.
2. Hierarki Spesifisitas CSS (Siapa yang Menang?)
Jika dua aturan CSS menargetkan elemen yang sama dengan properti yang bertolak belakang (misal `color: red` vs `color: blue`), browser menghitung skor bobot spesifisitas:
Tingkatan Bobot CSS
css
| 1 | /* 1. Inline Style: style="color: red" -> Bobot: 1000 */ |
| 2 | |
| 3 | /* 2. ID Selector: #utama -> Bobot: 100 */ |
| 4 | #utama { |
| 5 | color: purple; |
| 6 | } |
| 7 | |
| 8 | /* 3. Class Selector / Attribute / Pseudo-class: .btn, :hover -> Bobot: 10 */ |
| 9 | .btn { |
| 10 | color: green; |
| 11 | } |
| 12 | |
| 13 | /* 4. Element Selector: button, p, div -> Bobot: 1 */ |
| 14 | button { |
| 15 | color: blue; |
| 16 | } |
| 17 | |
| 18 | /* ⚠️ !important: Menimpa segalanya tapi sangat tidak disarankan karena merusak maintainability! */ |
Kuis Pemahaman
+10 XP
Apa fungsi dari aturan CSS `* { box-sizing: border-box; }`?