Dasar CSS: selector dan box model

Idenya

HTML menyatakan apa sesuatu itu; CSS (Cascading Style Sheets) menyatakan tampilannya. Sebuah stylesheet adalah daftar rule, dan setiap rule berkata "untuk elemen-elemen ini, atur property-property ini":

selector {
  property: value;
  another-property: value;
}

Dua konsep menopang hampir semua hal lain di CSS: selector (elemen mana yang dikenai sebuah rule) dan box model (bagaimana ukuran dan jarak setiap elemen dihitung).

Menambahkan CSS ke halaman

CSS biasanya berada di file terpisah yang ditautkan dari <head> (<link rel="stylesheet" href="styles.css">). Untuk contoh kecil, elemen <style> bekerja dengan cara yang sama:

<style>
  h1 { color: #7a4b2a; }
  p { line-height: 1.6; }
</style>

<h1>Toko Kita</h1>
<p>Freshly roasted Indonesian coffee, delivered to your door.</p>

Di latihan-latihan, tab style.css berperan sebagai file stylesheet.

Selector

Selector adalah cara sebuah rule menyatakan elemen mana yang dikenainya. Kadang kamu ingin semua paragraf, kadang hanya harga di kartu produk, kadang hanya link saat mouse sedang di atasnya. Ini selector yang akan kamu pakai sehari-hari, masing-masing dengan komentar yang menjelaskan apa yang dipilihnya:

<style>
  p { color: #333; }                         /* type: every <p> */
  .price { font-weight: bold; }              /* class: every element with class="price" */
  #featured { background: #fff4e5; }        /* id: the one element with id="featured" */
  .card h3 { margin: 0; }                    /* descendant: <h3> anywhere inside .card */
  .card > p { color: #666; }                 /* child: <p> directly inside .card */
  h1, h2, h3 { font-family: Georgia, serif; } /* group: same rule for several selectors */
  a:hover { text-decoration: none; }         /* pseudo-class: a state */
</style>

<article class="card" id="featured">
  <h3>Arabica Gayo</h3>
  <p>Fruity and smooth.</p>
  <p class="price">Rp 95.000</p>
</article>

Dalam praktiknya, class mengerjakan sebagian besar pekerjaan: bisa dipakai ulang, mendeskripsikan sebuah peran (.card, .price, .button) dan mudah ditimpa. Id unik per halaman dan sangat "kuat" di cascade (modul 7), jadi simpan untuk link dan JavaScript, bukan untuk gaya.

Box model

Setiap elemen adalah sebuah kotak persegi panjang yang terdiri dari empat lapisan, dari dalam ke luar:

┌──────────────── margin (space outside, transparent) ────────────────┐
│  ┌───────────── border ───────────────────────────────────────────┐  │
│  │  ┌────────── padding (space inside, has the background) ────┐  │  │
│  │  │                                                          │  │  │
│  │  │                   content (width × height)               │  │  │
│  │  │                                                          │  │  │
│  │  └──────────────────────────────────────────────────────────┘  │  │
│  └────────────────────────────────────────────────────────────────┘  │
└──────────────────────────────────────────────────────────────────────┘

<style>
  .box {
    width: 200px;
    padding: 20px;
    border: 5px solid #7a4b2a;
    margin: 30px;
    background: #fff4e5;
  }
</style>

<div class="box">A box</div>

Seberapa lebar kotak itu di layar? Secara default, width hanya mengatur konten, dan padding serta border ditambahkan di atasnya: 200 + 20 + 20 + 5 + 5 = 250 px. Ditambah margin 30 px di setiap sisi yang mendorong tetangga menjauh.

box-sizing: border-box

Menambahkan padding lalu kotaknya ikut membesar jarang sekali yang kamu inginkan. Dengan box-sizing: border-box, width sudah termasuk padding dan border:

<style>
  *, *::before, *::after { box-sizing: border-box; }
  .box { width: 200px; padding: 20px; border: 5px solid #7a4b2a; background: #fff4e5; }
</style>

<div class="box">Exactly 200px wide, padding and border included</div>

Hampir setiap stylesheet modern dimulai dengan baris pertama itu. Dengan begitu width: 200px berarti 200 px di layar, dan menambahkan padding tidak pernah merusak layout.

Shorthand

Mengatur padding-top, padding-right, padding-bottom, dan padding-left satu per satu itu melelahkan. Sebagian besar property kotak punya shorthand yang mengatur beberapa sisi dalam satu baris. Urutan yang perlu diingat adalah searah jarum jam dari atas:

padding: 10px;               /* all four sides */
padding: 10px 20px;          /* top & bottom 10, left & right 20 */
padding: 10px 20px 30px 40px; /* top, right, bottom, left (clockwise) */
margin: 0 auto;              /* centre a block that has a width */
border: 1px solid #ddd;      /* width, style, colour */

Dua hal yang pasti mengejutkan semua orang sekali:

• Margin vertikal saling melebur (collapse): dua paragraf dengan margin: 20px berjarak 20 px, bukan 40. Margin yang lebih besar yang menang.
• Elemen inline (<a>, <span>, <strong>) mengabaikan width, height, dan margin vertikal. Atur display: inline-block atau display: block saat kamu butuh kotak yang bisa diatur ukurannya.

Mengapa ini penting untuk kode yang bersih

Selector berbasis class yang mendeskripsikan peran (.card, .price) membuat CSS bisa dipakai ulang dan mudah ditebak, dan border-box global menghilangkan seluruh golongan bug aritmetika layout. CSS yang bersih dimulai dengan kebiasaan yang sama dengan Python yang bersih: beri nama berdasarkan apa sesuatu itu, bukan tampilannya (.price, bukan .bold-red-text).

Rangkuman

• Rule = selector { property: value; }; tautkan stylesheet atau gunakan <style>.
• Selector: p, .class, #id, .a .b (descendant), .a > .b (anak langsung), a, b (kelompok), :hover.
• Box model: konten → padding → border → margin.
• width default hanya konten; box-sizing: border-box menyertakan padding dan border.
• Shorthand berurutan atas, kanan, bawah, kiri; margin vertikal saling melebur; elemen inline mengabaikan width/height.