Tiga cara memakai CSS

Inline, internal, dan external — beserta alasan memilihnya.

Pahami konsepnya

CSS bisa masuk ke halaman lewat tiga pintu. Pertama, inline style: deklarasi diselipkan langsung pada atribut style elemen — cepat untuk uji sekali pakai, tapi menyulitkan saat aturan menumpuk karena tersebar di mana-mana.

Kedua, internal style: seluruh aturan dikumpulkan dalam tag <style> di bagian head halaman. Rapi untuk satu halaman tunggal — latihan kecil, email, prototipe — tetapi tidak terbagi ke halaman lain. Ketiga, external style: aturan hidup di berkas sendiri bernama .css lalu dihubungkan lewat <link rel="stylesheet" href="style.css"> di head.

Cara ketiganyalah standar proyek nyata: berkas CSS terpisah bisa dipakai ratusan halaman, di-cache browser agar loading lebih cepat, dan dikerjakan terpisah dari isi HTML. Lokasi berkasnya mengikuti aturan yang sama seperti gambar dan tautan: sefolder langsung nama berkas, dalam subfolder folder/nama.css, atau naik satu tingkat ../nama.css.

Coba contoh kode

<!-- 1) inline: pada elemen -->
<h1 style="color: blue;">Judul biru</h1>

<!-- 2) internal: di head -->
<style>
  h1 { color: green; }
</style>

<!-- 3) external: berkas terpisah -->
<link rel="stylesheet" href="style.css">

Ketiganya sah dan dipakai di saat berbeda: inline untuk eksperimen sepintas, internal untuk halaman tunggal, external untuk proyek. Saat ketiganya menimpa properti yang sama, yang paling dekat dengan elemen (inline) menang — itu makna "cascading" yang dibahas pelajaran selektor.

Pasangan berkas terpisah

<!-- index.html -->
<head>
  <link rel="stylesheet" href="style.css">
</head>

/* style.css */
body {
  background: #35A9DB;
  color: #fff;
  font-family: sans-serif;
}

Uji koneksi kedua berkas dengan aturan mencolok seperti latar biru di atas — begitu terlihat, seluruh aturan berikutnya cukup ditulis di style.css. Pola dua-berkas ini dipakai semua pelajaran CSS selanjutnya.

Latihan singkat

Bangun pasangan index.html + style.css, hubungkan dengan link, lalu buktikan koneksi itu dengan mengubah warna latar body.