Memasang Stylesheet

Kita sudah mengenal cara browser memproses CSS dan cara selector menautkan aturan dengan elemen HTML. Pertanyaan berikutnya sederhana tetapi penting: di mana kode CSS diletakkan agar browser menemukannya? HTML menyediakan tiga jalur resmi: berkas CSS eksternal yang dipasang lewat tag <link>, blok <style> di dalam halaman, dan atribut style pada elemen. Ketiganya menghasilkan tampilan yang sama, tetapi dampaknya terhadap perawatan kode sangat berbeda, dan di akhir chapter kita akan melihat mengapa satu cara menjadi pilihan baku.

Berkas Eksternal: Cara yang Disarankan #

Pada cara ini, CSS tinggal di berkas tersendiri — biasanya bernama styles.css — dan halaman HTML memasangnya dari <head>. Berikut dokumen lengkapnya:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Toko Kopi Senja</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Selamat Datang di Toko Kami</h1>
  <p>Kopi Gayo baru masuk musim panen.</p>
</body>
</html>

h1 {
  color: #7c4a1e;
  font-size: 28px;
}

Seluruh aturan di styles.css otomatis berlaku pada halaman yang memasangnya lewat <link>:

Baris paling penting dari contoh di atas adalah tag <link>. Mari kita bedah atributnya:

1. rel="stylesheet": menjelaskan hubungan berkas tersebut dengan halaman — berkas ini adalah dokumen style.
2. href="styles.css": lokasi berkas CSS, ditulis sebagai path relatif terhadap halaman HTML; pada contoh ini keduanya berada di folder yang sama.
3. Posisi di <head>: menempatkannya di bagian kepala membuat browser mengunduh CSS sedini mungkin, sehingga tampilan pertama yang dilihat pengguna sudah bergaya.

Berkas eksternal menjadi cara yang disarankan karena tiga manfaat ini saling menguatkan:

• Caching: browser menyimpan berkas CSS yang sudah diunduh. Saat pengunjung membuka halaman kedua di situs yang sama, CSS tidak diunduh ulang.
• Dipakai ulang: satu styles.css dapat mengatur tampilan puluhan hingga ratusan halaman; perubahan satu baris langsung berlaku di semua halaman yang memasangnya.
• Pemisahan tanggung jawab: HTML tetap murni berisi struktur, dan CSS murni berisi aturan tampilan.

Internal: Blok style di Dalam Halaman #

Cara kedua menaruh aturan langsung di dalam elemen <style> pada <head> halaman:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Halaman Uji Coba</title>
  <style>
    p {
      color: #52606d;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <p>Aturan di atas hanya berlaku untuk halaman ini.</p>
</body>
</html>

Demo interaktif pada course ini menjalankan HTML dan CSS dalam satu dokumen, sehingga contoh di bawah memakai cara internal — perhatikan aturan di blok <style> langsung mengatur seluruh isi dokumen:

Cara ini praktis untuk halaman tunggal, prototipe cepat, atau halaman yang tampilannya memang unik dan tidak akan dipakai ulang. Kekurangannya jelas: setiap halaman lain yang butuh gaya serupa harus menyalin aturannya, dan satu perubahan kecil harus dilakukan di banyak tempat.

Ketika membangun halaman sungguhan, langkah terakhirnya tinggal memindahkan aturan dari blok <style> itu ke styles.css dan memasangnya lewat <link> — isi aturannya persis sama.

Inline: Atribut style pada Elemen #

Cara ketiga menempelkan deklarasi langsung pada elemen lewat atribut style:

<p style="color: #b45309; font-weight: 600;">Diskon spesial akhir pekan.</p>

Atribut style tidak memakai selector karena targetnya sudah jelas: elemen pemilik atribut itu sendiri. Karena prioritasnya sangat tinggi dan tidak bisa dipakai ulang, gunakan cara ini hanya untuk uji cepat atau kebutuhan khusus.

Membandingkan Tiga Cara #

Untuk proyek apa pun yang lebih besar dari satu halaman, berkas eksternal hampir selalu menjadi pilihan yang tepat. Caching membuat halaman terasa cepat, reusability menjaga konsistensi antarhalaman, dan pemisahan tanggung jawab membuat kedua berkas mudah dirawat. Cara internal dan inline tetap perlu dikenali karena kita akan menemukannya di kode proyek lain.

Ringkasan #

Ada tiga cara memasang stylesheet: berkas eksternal lewat <link>, blok <style> internal, dan atribut style inline. Ketiganya valid, tetapi berkas eksternal menjadi pilihan baku karena dapat di-cache, dipakai ulang antarhalaman, dan menjaga HTML tetap bersih. Pada chapter berikutnya kita mempraktikkan semuanya: membangun halaman pertama yang memasang stylesheet eksternal dari nol.