Hari 2: Selector, Cascade & Box Model

Menguasai selector CSS, cascade/specificity, dan box model (margin, border, padding, content) lewat playground interaktif.

Pengantar

Di Hari 1 kita sudah bisa “mengecat” halaman. Hari ini: memilih target dengan tepat (selector), memahami cascade, dan mengukur kotak elemen (box model).

Selector yang sering dipakai

Selector	Contoh	Artinya
Elemen	`p`	Semua paragraf
Class	`.card`	Elemen ber-class card
ID	`#hero`	Satu elemen ber-id hero
Descendant	`nav a`	Link di dalam nav
Child	`ul > li`	li langsung di bawah ul
Pseudo	`a:hover`	Saat pointer di atas link

Selector beraksi

<style>
body { font-family: system-ui, sans-serif; margin: 1rem; }
p { color: #64748b; }
.tebal { font-weight: 700; color: #0f172a; }
#khusus { color: #0f766e; }
nav a { color: #0369a1; text-decoration: none; margin-right: 0.75rem; }
nav a:hover { text-decoration: underline; }
</style>
<nav>
<a href="#a">Beranda</a>
<a href="#b">Tentang</a>
</nav>
<p>Paragraf biasa.</p>
<p class="tebal">Paragraf ber-class tebal.</p>
<p id="khusus">Paragraf dengan id khusus.</p>

Preview

Cascade & specificity (singkat)

Jika beberapa aturan bentrok, yang “menang” ditentukan oleh:

Importance (!important — hindari kalau bisa)
Specificity (inline > id > class > elemen)
Urutan (yang ditulis belakangan menang jika specificity sama)

Siapa yang menang?

Preview

Box model

Setiap elemen adalah kotak:

content → padding → border → margin

padding — jarak dalam (konten ke border)
border — garis tepi
margin — jarak luar ke elemen lain
box-sizing: border-box — width termasuk padding+border (sangat berguna)

Box model visual

<style>
body { font-family: system-ui, sans-serif; margin: 1rem; }
.box {
  box-sizing: border-box;
  width: 220px;
  padding: 16px;
  border: 4px solid #0f766e;
  margin: 24px;
  background: #ccfbf1;
}
.label { font-size: 0.85rem; color: #334155; }
</style>
<p class="label">Ubah padding / margin / border dan lihat jaraknya.</p>
<div class="box">Kotak dengan padding, border, dan margin.</div>
<div class="box">Kotak kedua — perhatikan jarak antar kotak (margin).</div>

Preview

Kuis hari 2

Selector mana yang biasanya paling spesifik?

Bagian box model mana yang mengatur jarak luar antar elemen?

Checklist

0/4 selesai

Mencoba class, id, dan :hover
Mengerti cascade sederhana
Mengubah padding/margin di playground
Mengenal box-sizing: border-box

Hari 2: Selector, Cascade & Box Model

Pengantar

Selector yang sering dipakai

Cascade & specificity (singkat)

Box model

Kuis hari 2

Checklist

Komentar