Internal dan Inline CSS

File CSS terpisah adalah cara utama yang kita pakai, tetapi bukan satu-satunya jalan. CSS dapat pula ditulis di dalam dokumen HTML lewat elemen style, bahkan menempel langsung pada elemen lewat atribut style. Ketiganya menghasilkan tampilan yang sama, sehingga pilihan kita ditentukan oleh situasi, bukan oleh hasil visualnya. Pada Chapter ini kita membandingkan ketiga cara tersebut, mengenali waktu yang tepat untuk internal dan inline, serta melihat ketiganya bekerja dalam satu file demo.

Tiga Cara Menyisipkan CSS #

Cara yang berbeda-beda ini sering disebut dengan nama pendeknya:

• External CSS: aturan disimpan di file .css terpisah, dirujuk lewat elemen link. Cara ini yang dianjurkan untuk situs nyata.
• Internal CSS: aturan ditulis di dalam elemen <style> pada head dokumen yang sama.
• Inline CSS: deklarasi ditulis pada atribut style milik satu elemen tertentu.

CSS Internal dengan Elemen style #

Elemen <style> menampung aturan CSS secara utuh di dalam dokumen: selectornya lengkap, deklarasinya lengkap, tetapi letaknya satu dokumen dengan markup. Internal CSS wajar dipakai pada beberapa situasi:

• Email HTML: sebagian besar klien email tidak memuat file CSS eksternal, sehingga aturan ditulis internal ataupun inline.
• Gaya kritis above-the-fold: bagian teratas halaman digayai sejak awal agar tampilan pertama langsung utuh, pola yang dikenal sebagai critical CSS.
• Halaman demo atau halaman tunggal: satu file yang berdiri sendiri lebih mudah dibagikan dan diuji.

CSS Inline dengan Atribut style #

Atribut style adalah global attribute sehingga dapat dipasang pada elemen apa pun. Nilainya berupa satu atau beberapa deklarasi yang dipisah titik koma, misalnya style="color: #1a6b54; font-style: italic;". Pemakaian yang wajar antara lain uji cepat gaya saat mengetik kode, email HTML, dan menyisipkan gaya dari sistem yang tidak memberi akses ke file CSS.

Kelemahan Inline yang Perlu Diwaspadai #

Meskipun praktis, inline CSS membawa tiga kelemahan besar:

• Duplikasi: gaya yang sama ditulis berulang pada setiap elemen, sehingga perubahan kecil menuntut penyuntingan di banyak baris markup.
• Specificity tertinggi: gaya inline mengalahkan hampir semua selector, sehingga sulit ditimpa oleh aturan lain di file CSS.
• Diblokir kebijakan CSP: situs dengan Content Security Policy (CSP) yang ketat dapat menolak atribut style maupun elemen style karena keduanya termasuk gaya yang disisipkan langsung pada dokumen.

Tabel berikut merangkum ketiganya:

Demo Tiga Cara dalam Satu File #

Contoh berikut memakai ketiga cara sekaligus pada satu dokumen: file gaya-toko.css sebagai external, elemen style sebagai internal, dan atribut style sebagai inline:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Toko Siti</title>
  <link rel="stylesheet" href="gaya-toko.css">
  <style>
    .slogan {
      color: #1a6b54;
      font-style: italic;
    }
  </style>
</head>
<body>
  <h1>Toko Siti</h1>
  <p class="slogan">Segar setiap hari</p>
  <p style="color: #b45309;">Promo buah sampai akhir pekan.</p>
</body>
</html>

h1 {
  color: #1f2937;
  font-size: 32px;
}

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Judul "Toko Siti" berukuran 32 piksel berwarna gelap (dari CSS external)
  - Slogan "Segar setiap hari" miring berwarna hijau (dari CSS internal)
  - Baris promo berwarna oranye (dari CSS inline)

Mari kita telaah peran setiap baris penting di atas:

1. Baris 7 HTML (<link rel="stylesheet" href="gaya-toko.css">): cara external; mengambil aturan judul dari file terpisah.
2. Baris 8-13 HTML (<style> ... </style>): cara internal; aturan untuk class slogan ditulis langsung di head.
3. Baris 17 HTML (class="slogan"): paragraf sasaran aturan internal, tampil miring berwarna hijau.
4. Baris 18 HTML (style="color: #b45309;"): cara inline; deklarasi menempel pada satu paragraf promo saja.
5. Baris 1-4 CSS (h1 { ... }): satu-satunya aturan di file external, memberi ukuran dan warna judul.

Perhatikan paragraf promo: bila kita menambahkan aturan lain yang menyasar paragraf tersebut di file CSS, warna oranye itu tetap menang karena gaya inline memiliki specificity tertinggi. Perilaku inilah yang membuat inline sulit ditimpa dan sebaiknya dipakai secukupnya. Untuk halaman situs biasa, kita kembali ke pola external sebagai pilihan utama, yang diperdalam pada Chapter Selector Dasar berikutnya.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen style
• MDN Web Docs — Atribut global style
• MDN Web Docs — Header Content-Security-Policy

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Toko Siti</title>
  <link rel="stylesheet" href="gaya-toko.css">
  <style>
    .slogan {
      color: #1a6b54;
      font-style: italic;
    }
  </style>
</head>
<body>
  <h1>Toko Siti</h1>
  <p class="slogan">Segar setiap hari</p>
  <p style="color: #b45309;">Promo buah sampai akhir pekan.</p>
</body>
</html>

h1 {
  color: #1f2937;
  font-size: 32px;
}