Menghubungkan File CSS

Chapter sebelumnya memperlihatkan dua file yang bekerja bersama: satu file HTML berisi konten dan satu file CSS berisi gaya. Pertanyaannya, bagaimana browser mengetahui bahwa keduanya saling terhubung? Jawabannya ada pada satu baris markup di dalam head. Pada Chapter ini kita mempelajari elemen link dengan rel="stylesheet", aturan penempatan dan penulisan href-nya, serta manfaat caching yang menjadi alasan utama pemakaian file CSS terpisah.

Elemen link rel stylesheet #

Hubungan antara dokumen HTML dan file CSS dinyatakan dengan elemen link, sebuah void element yang diletakkan di dalam head:

<link rel="stylesheet" href="gaya.css">

Atribut rel (relationship) menyatakan hubungan file yang dirujuk terhadap dokumen; nilai stylesheet berarti file tersebut berisi CSS. Atribut href menunjuk lokasi file CSS, sama seperti href pada hyperlink yang telah kita pelajari. Browser yang membaca link ini mengunduh file CSS sebelum merender halaman, sehingga gaya langsung terpasang pada tampilan pertama.

Posisi link di dalam Head #

Praktik yang dianjurkan adalah menaruh semua elemen link rel="stylesheet" di dalam head, sebelum konten body. Browser berusaha merender halaman sedini mungkin; bila file CSS baru ditemukan di tengah body, browser harus memperbaiki tampilan yang telah dirender dan halaman dapat sesaat terlihat tanpa gaya. Istilah untuk gejala tersebut adalah flash of unstyled content. Dengan menaruh link di head, browser mengunduh CSS lebih dahulu dan tampilan langsung utuh.

Path Relatif pada href #

Nilai href mengikuti aturan path relatif yang sama dengan hyperlink. File CSS yang berada di folder yang sama dengan file HTML cukup dirujuk dengan nama filenya saja.

Pemakaian path absolut seperti www.example.com/css/gaya.css juga sah (tulis lengkap dengan skema https:// saat benar-benar dipakai), tetapi path relatif lebih lazim untuk aset milik situs itu sendiri karena tetap bekerja saat situs dipindah ke domain lain.

Atribut media untuk Gaya Bersyarat #

Atribut media menentukan kondisi kapan sebuah stylesheet diterapkan. Contoh paling umum adalah media="print" yang berlaku hanya saat halaman dicetak:

<link rel="stylesheet" href="cetak.css" media="print">

Browser tetap mengunduh file tersebut, tetapi aturannya hanya aktif ketika kondisi media terpenuhi. Kondisi yang lebih kaya seperti lebar layar ditulis dengan media query di dalam file CSS dan termasuk materi lanjutan CSS.

Manfaat Caching File Terpisah #

Browser menyimpan file yang diunduh ke dalam cache, kemudian memakai salinan tersebut untuk permintaan berikutnya selama masih berlaku. Manfaatnya nyata ketika satu file CSS dipakai oleh banyak halaman: pengunjung yang berpindah dari halaman utama ke halaman berita tidak mengunduh file CSS yang sama dua kali. Payload situs pun berkurang dan halaman berikutnya tampil lebih cepat. Manfaat ini hilang bila gaya ditulis menempel di setiap halaman, karena tiap halaman membawa salinan gayanya sendiri.

Contoh Lengkap: Halaman Berita dengan CSS Terpisah #

Contoh berikut terdiri atas dua file bundle: halaman-berita.html yang memuat konten dan gaya-berita.css yang memuat gaya:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Berita Komunitas</title>
  <link rel="stylesheet" href="gaya-berita.css">
</head>
<body>
  <h1>Berita Komunitas</h1>
  <article>
    <h2>Workshop HTML Akhir Pekan</h2>
    <p class="oleh">Ditulis oleh Siti Rahma</p>
    <p>Komunitas belajar web mengadakan workshop rutin setiap Sabtu di perpustakaan kota.</p>
  </article>
</body>
</html>

body {
  font-family: sans-serif;
  color: #1f2937;
}

h1 {
  color: #1a6b54;
}

.oleh {
  font-style: italic;
  color: #6b7280;
}

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Judul "Berita Komunitas" berwarna hijau
  - Baris "Ditulis oleh Siti Rahma" miring berwarna abu-abu
  - Paragraf isi berwarna gelap dengan jenis huruf tanpa kait

Mari kita telaah peran setiap baris penting di atas:

1. Baris 7 HTML (<link rel="stylesheet" href="gaya-berita.css">): deklarasi hubungan ke file CSS; path relatifnya menunjuk file di folder yang sama.
2. Baris 11-15 HTML (<article>): konten berita tanpa satu pun gaya; seluruh penampilan diserahkan ke CSS.
3. Baris 13 HTML (class="oleh"): label class pada baris penulis agar dapat dibedakan dari paragraf isi.
4. Baris 1-4 CSS (body { ... }): gaya dasar jenis huruf dan warna teks untuk seluruh halaman.
5. Baris 6-8 CSS (h1 { ... }): selector element yang mewarnai judul halaman.
6. Baris 10-12 CSS (.oleh { ... }): selector class yang membuat teks penulis miring dan abu-abu.

Dengan satu baris link, dokumen HTML memperoleh seluruh gaya dari file terpisah yang dapat di-cache browser. Chapter berikutnya mengulas dua cara menyisipkan CSS yang tidak memakai file terpisah: elemen style internal dan atribut style inline, beserta situasi ketika keduanya wajar dipakai.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen link
• MDN Web Docs — Menggunakan fitur media (at-rule @media)
• MDN Web Docs — HTTP caching

body {
  font-family: sans-serif;
  color: #1f2937;
}

h1 {
  color: #1a6b54;
}

.oleh {
  font-style: italic;
  color: #6b7280;
}

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Berita Komunitas</title>
  <link rel="stylesheet" href="gaya-berita.css">
</head>
<body>
  <h1>Berita Komunitas</h1>
  <article>
    <h2>Workshop HTML Akhir Pekan</h2>
    <p class="oleh">Ditulis oleh Siti Rahma</p>
    <p>Komunitas belajar web mengadakan workshop rutin setiap Sabtu di perpustakaan kota.</p>
  </article>
</body>
</html>