Abd. Asis

Di bab sebelumnya kita menulis rule CSS langsung di contoh kode tanpa membahas di mana tepatnya kode itu diletakkan. Pertanyaan itu tidak sepele — CSS bisa ditulis di tiga tempat berbeda, dan pilihan tempat menentukan seberapa jauh gaya itu berlaku. Ketika ketiganya hadir di halaman yang sama, browser punya aturan untuk memutuskan mana yang dijalankan.

CSS Eksternal

CSS eksternal adalah cara yang paling umum digunakan dalam proyek nyata. Kamu menyimpan semua rule CSS di file terpisah dengan ekstensi .css, lalu menghubungkannya ke HTML menggunakan tag <link> di dalam <head>.

<!-- portofolio.html -->
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Portofolio</title>
  <link rel="stylesheet" href="portofolio.css">
</head>
<body>
  <h1>Halo, saya Adi</h1>
  <p class="bio">Saya seorang web developer yang belajar CSS.</p>
</body>
</html>

/* portofolio.css */
body {
  font-family: sans-serif;
  max-width: 720px;
  margin: 0 auto;
  padding: 24px;
}

h1 {
  color: #1a2744;
}

.bio {
  color: #4b5563;
  line-height: 1.7;
}

Keunggulan utamanya: satu file CSS bisa dipakai oleh banyak halaman HTML sekaligus. Kalau kamu punya portofolio.html, tentang.html, dan proyek.html, ketiganya cukup menautkan ke portofolio.css yang sama. Perubahan di satu file CSS langsung berlaku di semua halaman.

CSS Internal

CSS internal ditulis langsung di dalam dokumen HTML, dibungkus dengan tag <style> di dalam <head>. Tidak ada file eksternal — semua ada di satu file.

<!-- tentang.html -->
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Tentang Saya</title>
  <style>
    body {
      font-family: sans-serif;
      background-color: #f8fafc;
    }

    h1 {
      color: #1a2744;
      border-bottom: 2px solid #e2e8f0;
      padding-bottom: 8px;
    }

    .highlight {
      background-color: #dbeafe;
      padding: 2px 6px;
      border-radius: 3px;
    }
  </style>
</head>
<body>
  <h1>Tentang Saya</h1>
  <p>Saya belajar <span class="highlight">CSS</span> sejak tahun lalu.</p>
</body>
</html>

CSS internal berguna untuk halaman yang memang unik dan tidak berbagi gaya dengan halaman lain. Prototipe cepat dan email HTML adalah dua kasus di mana CSS internal lazim digunakan karena tidak membutuhkan file tambahan.

Kekurangannya: kalau kamu punya sepuluh halaman HTML dengan CSS internal masing-masing, mengubah warna brand berarti membuka dan mengedit sepuluh file sekaligus.

CSS Inline

CSS inline ditulis langsung pada atribut style di elemen HTML. Formatnya adalah pasangan properti: nilai yang dipisahkan titik koma, tanpa selektor — karena gaya itu hanya berlaku untuk satu elemen itu saja.

<!-- contoh-inline.html -->
<p style="color: #1a56db; font-weight: 600; line-height: 1.8;">
  Teks ini mendapat gaya langsung dari atribut style.
</p>

<button style="background-color: #1a56db; color: white; padding: 8px 16px; border: none; border-radius: 4px;">
  Simpan
</button>

CSS inline adalah yang paling spesifik — hampir tidak bisa di-override oleh CSS lain (lebih lanjut tentang ini di bagian cascade di bawah). Tapi kekurangannya juga signifikan: kode menjadi campur aduk antara struktur dan presentasi, sulit dipelihara, dan tidak bisa dipakai ulang di elemen lain.

Gunakan CSS inline hanya untuk override cepat yang bersifat sementara, atau untuk nilai yang memang dinamis dan dihasilkan lewat JavaScript. Untuk styling permanen, selalu gunakan class di file CSS eksternal.

Ketika Ketiganya Bertemu

Pertanyaan yang wajar muncul: kalau sebuah elemen mendapat gaya dari tiga sumber sekaligus — ada di file CSS eksternal, ada di <style> internal, dan ada juga atribut style inline — mana yang berlaku?

Browser menggunakan mekanisme yang disebut cascade untuk memutuskan ini. Dalam konteks konflik antara ketiga metode di atas, urutan prioritasnya dari rendah ke tinggi adalah:

CSS Eksternal < CSS Internal < CSS Inline

Artinya, inline selalu menang atas internal, dan internal menang atas eksternal — jika mereka mendeklarasikan properti yang sama untuk elemen yang sama.

Perhatikan contoh ini:

<!-- demo-cascade.html -->
<head>
  <link rel="stylesheet" href="portofolio.css">
  <style>
    h1 {
      color: #dc2626; /* merah dari internal */
    }
  </style>
</head>
<body>
  <h1 style="color: #16a34a;">Judul Halaman</h1>
</body>

/* portofolio.css */
h1 {
  color: #1a2744; /* biru gelap dari eksternal */
}

Meskipun ada tiga deklarasi color untuk h1, yang tampil di browser adalah warna dari inline (#16a34a) karena inline punya prioritas tertinggi.

Urutan <link> dan <style> di dalam <head> juga berpengaruh: jika <style> internal ditulis setelah <link> eksternal, dan keduanya punya spesifisitas yang sama, CSS internal yang menang karena dibaca terakhir. Letakkan <link> eksternal sebelum <style> internal adalah konvensi umum yang membuat urutan ini lebih mudah diprediksi.

Perbandingan Singkat

Ketiga metode punya tempat masing-masing tergantung konteks:

Metode	Scope	Kapan digunakan
Eksternal	Banyak halaman	Proyek nyata, gaya yang dipakai bersama
Internal	Satu halaman	Prototipe cepat, halaman yang benar-benar unik
Inline	Satu elemen	Override dinamis lewat JavaScript, email HTML

Latihan

Coba eksplorasi ketiga metode dengan skenario berikut menggunakan file yang sudah ada:

Pisahkan CSS dari profil.html yang selama ini ditulis inline atau internal ke file profil.css tersendiri. Hubungkan keduanya dengan tag <link>. Pastikan hasilnya identik di browser.
Tambahkan blok <style> internal di profil.html yang mendefinisikan color: #dc2626 untuk elemen h1. Amati apakah warna berubah atau tidak — lalu cek posisi <style> relatif terhadap <link> untuk memahami mengapa hasilnya seperti itu.
Tambahkan style="color: #16a34a;" langsung pada tag <h1>. Amati bahwa inline sekarang menang atas keduanya. Hapus atribut style setelah selesai bereksperimen.

Dengan paham di mana CSS bisa diletakkan dan bagaimana cascade memutuskan prioritasnya, kamu sudah punya fondasi yang cukup untuk mulai mengeksplorasi properti-properti CSS yang mengontrol tampilan teks, warna, dan tata letak. Bab berikutnya membahas sesuatu yang sering disepelekan tapi sangat berguna: komentar CSS — cara mendokumentasikan kode agar mudah dipahami kembali nanti.

BAB 4: Cara Memakai CSS

CSS Eksternal

CSS Internal

CSS Inline

Ketika Ketiganya Bertemu

Perbandingan Singkat

Latihan

Referensi