Kalau HTML adalah kerangka rumah (dinding, pintu, jendela), CSS (Cascading Style Sheets) adalah cat, lantai, dan tata ruangnya. HTML bilang "ini judul", CSS bilang "judul ini warnanya hijau, ukurannya 32px, dan ada di tengah".

CSS2 dulu ditulis sebagai satu spesifikasi besar. CSS3 berbeda: ia dipecah menjadi banyak modul yang berkembang sendiri-sendiri, misalnya Selectors, Box Model, Flexbox, Grid, Animations, dan Media Queries. Karena itu tidak ada "CSS4" sebagai satu paket. Yang ada adalah modul dengan level masing-masing, misalnya Selectors Level 4. Istilah "CSS3" sekarang dipakai untuk menyebut CSS modern secara umum.

<!-- 1. Inline -->
<p style="color: red;">Teks merah</p>

<!-- 2. Internal -->
<head>
  <style>
    p { color: green; }
  </style>
</head>

<!-- 3. External -->
<head>
  <link rel="stylesheet" href="style.css">
</head>

Cara external paling disarankan: satu file style.css bisa dipakai puluhan halaman, browser menyimpannya di cache, dan HTML tetap bersih. Inline paling susah dirawat karena gayanya tersebar di setiap tag, dan specificity-nya sangat tinggi (nanti kita bahas).

Satu rule terdiri dari selector dan blok deklarasi:

h1 {
  color: #2e7d32;
  font-size: 32px;
}

• h1 adalah selector: elemen mana yang mau diberi gaya.
• color: #2e7d32; adalah deklarasi: pasangan properti dan nilai, dipisah titik dua, diakhiri titik koma.
• Kurung kurawal membungkus semua deklarasi.

Hasilnya: semua <h1> jadi hijau dengan ukuran 32px. Lupa titik koma di tengah? Browser membaca dua deklarasi sebagai satu nilai yang tidak valid, sehingga keduanya diabaikan. Biasakan selalu menulisnya, termasuk di baris terakhir.

* { margin: 0; }              /* universal: semua elemen */
p { line-height: 1.6; }       /* elemen: semua <p> */
.tombol { padding: 8px; }     /* class: elemen dengan class="tombol" */
#utama { max-width: 960px; }  /* id: elemen dengan id="utama" */

Class boleh dipakai berkali-kali dan satu elemen boleh punya banyak class (class="tombol besar"). Id harus unik dalam satu halaman. Aturan praktisnya: pakai class untuk gaya, simpan id untuk anchor link atau JavaScript.

Kamu juga bisa menggabungkan: p.catatan berarti <p> yang punya class catatan, dan h1, h2 (dengan koma) berarti h1 dan h2 mendapat gaya yang sama.

Kombinator memilih elemen berdasarkan hubungannya dengan elemen lain, seperti silsilah keluarga.

<nav>
  <ul>
    <li><a href="#">Beranda</a></li>
  </ul>
  <a href="#">Login</a>
</nav>
<h2>Judul</h2>
<p>Paragraf pertama</p>
<p>Paragraf kedua</p>

Perhatikan nav > a tidak memilih "Beranda" karena link itu cucu nav, bukan anak langsung.

Memilih elemen berdasarkan atribut dan nilainya:

input[type="email"] { border-color: teal; }
a[href^="https"] { color: green; }   /* diawali https */
a[href$=".pdf"] { font-weight: bold; } /* diakhiri .pdf */
img[alt] { outline: 1px solid; }     /* punya atribut alt */

Ini praktis untuk form: kamu bisa menata semua input email tanpa menambah class satu per satu.

Pseudo-class (satu titik dua) memilih elemen berdasarkan keadaan atau posisi:

a:hover { text-decoration: underline; }    /* saat kursor di atasnya */
input:focus { outline: 2px solid teal; }   /* saat sedang aktif diketik */
input:checked + label { font-weight: bold; }
li:nth-child(2n) { background: #f1f8e9; }  /* baris genap */
li:nth-child(3) { color: red; }            /* item ketiga */
.tombol:not(.aktif) { opacity: 0.6; }      /* yang bukan .aktif */

:nth-child(2n) menghitung mulai dari 1, jadi yang terpilih item ke-2, 4, 6, dan seterusnya. Pakai odd atau even kalau lebih mudah dibaca. Jangan hapus gaya :focus tanpa pengganti, karena pengguna keyboard butuh tanda elemen mana yang sedang aktif.

Pseudo-element (dua titik dua) menargetkan bagian dari elemen, atau membuat "elemen palsu" tanpa menambah HTML:

.wajib::after {
  content: " *";
  color: red;
}
p::first-line { font-weight: bold; }

Label <label class="wajib">Email</label> akan tampil sebagai "Email *" dengan bintang merah. Tanpa properti content, ::before dan ::after tidak muncul sama sekali.

Bagaimana kalau dua rule menargetkan elemen yang sama dengan warna berbeda? Browser memutuskan lewat cascade: urutan pertimbangannya adalah tingkat kepentingan (!important), lalu specificity, lalu urutan (yang ditulis belakangan menang).

Specificity dihitung sebagai tiga angka (id, class, elemen):

Class, attribute selector, dan pseudo-class masuk kolom tengah. Elemen dan pseudo-element masuk kolom kanan. Universal * dan kombinator bernilai nol. Bandingkan dari kiri: satu id selalu mengalahkan sepuluh class.

#judul { color: blue; }
.besar { color: red; }
h1 { color: green; }

<h1 id="judul" class="besar"> akan berwarna biru, walaupun rule h1 ditulis paling akhir, karena (1,0,0) lebih tinggi dari yang lain.

!important (color: red !important;) melompati specificity. Anggap ini jalan terakhir, misalnya untuk menimpa gaya library yang tidak bisa kamu ubah. Kalau dipakai sembarangan, kamu akan terjebak perang !important yang susah dilacak.

• Menulis titik pada HTML: class=".tombol". Titik hanya dipakai di CSS, di HTML cukup class="tombol".
• Mengira nav > a juga memilih link di dalam ul. Child hanya satu tingkat, pakai spasi untuk semua keturunan.
• Lupa content: "" pada ::before/::after, lalu bingung kenapa tidak muncul.
• Memakai id untuk gaya di mana-mana, lalu kesulitan menimpanya dengan class.
• Menambal masalah dengan !important alih-alih memperbaiki selector.