Baca tabel ini dari baris (pemanggil) ke kolom (yang dipanggil):

Dua hal yang perlu kamu tangkap dari peta ini:

1. HTML adalah titik awal. Browser selalu membuka file HTML dulu. Dari situlah ia tahu file CSS dan JS mana yang harus diunduh.
2. Arahnya tidak simetris. CSS tidak pernah memanggil JavaScript. CSS hanya bisa "menunjuk" elemen HTML lewat selector. Sebaliknya, JavaScript bisa menjangkau HTML (lewat DOM) dan CSS (lewat class atau style). Karena itu, setiap kali halaman perlu berubah setelah dimuat, JavaScript-lah yang turun tangan.

Bab ini membahas koneksi pertama: HTML ke CSS.

1. Inline, lewat atribut style di elemen:

<p style="color: red; font-size: 20px">Diskon hari ini!</p>

Paragraf itu jadi merah dan berukuran 20px. Gayanya menempel di satu elemen saja. Mau dipakai di paragraf lain? Harus disalin. Mau ganti merah jadi biru di seluruh situs? Cari satu per satu. Hindari untuk proyek sungguhan.

2. Internal, lewat tag <style> di <head>:

<head>
  <style>
    p { color: red; }
  </style>
</head>

Semua <p> di halaman itu jadi merah. Lumayan untuk prototipe atau halaman tunggal, tapi tidak bisa dipakai bersama oleh halaman lain.

3. External, lewat file .css dan tag <link>:

<head>
  <link rel="stylesheet" href="css/style.css">
</head>

Satu file gaya bisa dipakai puluhan halaman. Browser juga menyimpannya di cache, jadi saat pindah halaman file itu tidak perlu diunduh ulang. Ini standar industri.

Urutan prioritas saat bentrok

Kalau dua aturan mengatur properti yang sama pada elemen yang sama, siapa yang menang? Urutannya:

1. Deklarasi dengan !important mengalahkan semuanya (pakai sangat jarang).
2. Inline style mengalahkan aturan dari <style> maupun file eksternal.
3. Antara <style> dan file eksternal, tidak ada yang otomatis lebih kuat. Browser membandingkan specificity selector dulu (#id lebih kuat dari .class, .class lebih kuat dari nama tag).
4. Kalau specificity sama, yang ditulis paling akhir menang.

Sering ada yang bilang "internal mengalahkan external". Itu hanya kelihatan benar karena <style> biasanya ditulis setelah <link>. Coba balik urutannya:

<head>
  <style> p { color: red; } </style>
  <link rel="stylesheet" href="css/style.css"> <!-- isinya: p { color: blue; } -->
</head>

Paragraf akan biru, karena aturan dari file eksternal dibaca belakangan dan specificity-nya sama. Detail cascade lengkap ada di kelas HTML5 dan CSS3.

Penyebab nomor satu "CSS saya tidak jalan" adalah path yang salah. Misalkan struktur foldernya begini:

proyek-web/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── script.js
└── halaman/
    └── tentang.html

Path relatif dihitung dari lokasi file HTML yang sedang dibuka, bukan dari folder proyek.

./ artinya "folder saat ini", jadi ./css/style.css sama dengan css/style.css. ../ artinya "folder induk". Path yang diawali / disebut absolut terhadap root situs: dari halaman mana pun, /css/style.css selalu menunjuk ke domainmu.com/css/style.css.

Hati-hati dengan path /... kalau kamu membuka HTML langsung dengan dobel klik (alamatnya file:///...). Di mode itu, "root" adalah root hard disk, bukan folder proyek, sehingga CSS-nya tidak ketemu. Pakai server lokal (misalnya ekstensi Live Server) atau path relatif.

Tiga syarat agar <link> bekerja:

• Ada rel="stylesheet". Tanpa itu, browser tidak menganggap file tersebut sebagai gaya.
• Path benar, termasuk huruf besar kecil. Laptop Windows atau macOS biasanya tidak mempermasalahkan Style.css vs style.css, tapi server Linux (tempat kebanyakan situs di-deploy) membedakannya. Hasilnya: jalan di laptop, rusak setelah online.
• Ditaruh di <head>, supaya gaya sudah siap sebelum konten ditampilkan dan halaman tidak sempat "berkedip" polos.

<link> menyambungkan file. Selector menyambungkan setiap aturan ke elemen.

<h1 id="judul">Toko Buku</h1>
<p>Selamat datang.</p>
<button class="tombol">Beli</button>
<button class="tombol" data-status="habis">Pesan</button>

#judul { color: navy; }                    /* 1 elemen */
p { line-height: 1.6; }                    /* semua <p> */
.tombol { background: crimson; color: white; } /* 2 tombol */
[data-status="habis"] { opacity: 0.5; }    /* tombol kedua saja */

Hasilnya: judul biru tua, paragraf berjarak baris lega, kedua tombol merah berteks putih, dan tombol "Pesan" tampak pudar karena punya data-status="habis".

Selector atribut untuk data-* sangat berguna nanti: JavaScript cukup mengganti nilai data-status, lalu CSS otomatis menyesuaikan tampilan.

Kalau sebuah aturan tidak berefek, cek berurutan dari yang paling kasar ke paling halus:

1. File-nya termuat? Buka DevTools (F12), tab Network, muat ulang. Kalau style.css berstatus 404, masalahnya di path atau rel.
2. Selector-nya cocok? Klik kanan elemen, pilih Inspect. Di panel Styles, aturanmu harus muncul. Kalau tidak muncul sama sekali, selector tidak cocok dengan elemen: typo, lupa titik, atau beda huruf besar kecil.
3. Aturannya kalah? Kalau aturan muncul tapi dicoret, ada aturan lain yang menang: inline style, specificity lebih tinggi, atau ditulis belakangan.
4. Sintaksnya valid? Ikon peringatan di panel Styles menandakan properti atau nilai yang tidak dikenal.

• Typo nama class: HTML class="Harga", CSS .harga. Nama class case-sensitive, jadi keduanya berbeda.
• Lupa titik atau pagar: menulis tombol { } padahal maksudnya .tombol { }. Browser mencari tag <tombol> yang tidak ada.
• Path relatif dari folder yang salah: memakai css/style.css di halaman/tentang.html, padahal seharusnya ../css/style.css.
• Lupa rel="stylesheet" di <link>.
• Inline style sisa debugging yang diam-diam mengalahkan aturan di file CSS.
• Mengira <style> selalu menang atas file eksternal. Yang menentukan adalah specificity, lalu urutan penulisan.