Menghubungkan File CSS

Pada latihan sebelumnya kita menulis CSS di dalam elemen <style> milik satu halaman. Begitu sebuah website tumbuh menjadi puluhan halaman, menyalin CSS yang sama ke setiap berkas bukanlah pilihan yang sehat: satu perubahan warna harus diulang di semua tempat. Solusinya adalah memisahkan CSS ke berkas sendiri, lalu menghubungkannya ke setiap halaman lewat satu baris tag. Pada Chapter ini kita membedah tag yang menjalankan tugas tersebut, struktur jalur yang membuatnya berhasil atau gagal, serta kriteria memilih antara CSS eksternal, internal, dan inline.

Menyisipkan Stylesheet dengan Tag link #

Elemen <link> ditempatkan di dalam <head> dan bertugas menghubungkan dokumen dengan berkas lain. Untuk CSS, bentuknya selalu seperti ini:

html
index.html
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Kelas Daring Infokelas</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1 class="judul">Kelas Daring Infokelas</h1>
  <section class="kartu">
    <p class="teks">Selamat datang di kelas dasar penataan tampilan.</p>
  </section>
</body>
</html>

css
contoh-styles.css
/* styles.css — gaya bersama untuk semua halaman */
body {
  font-family: system-ui, sans-serif;
  margin: 0;
  padding: 24px;
  background-color: rgb(248, 250, 252);
}
.judul {
  color: rgb(30, 58, 138);
  font-size: 28px;
}
.kartu {
  background-color: rgb(239, 246, 255);
  border: 2px solid rgb(147, 197, 253);
  border-radius: 12px;
  padding: 16px;
  max-width: 480px;
}
.teks {
  color: rgb(71, 85, 105);
  line-height: 1.5;
}

Hasil di Browser:

text
Judul berwarna rgb(30, 58, 138) dengan ukuran 28px. Kartu berlatar
rgb(239, 246, 255), bersudut membulat 12px, dan ber-padding 16px.
Paragraf berwarna rgb(71, 85, 105) dengan line-height 24px. Seluruh
nilai itu berasal dari styles.css yang dimuat lewat tag link.

Mari kita telaah baris kuncinya:

<link rel="stylesheet" href="styles.css">: atribut rel (relationship) menyatakan jenis hubungan berkas — stylesheet berarti berkas berisi CSS yang harus diterapkan ke halaman.
href="styles.css": jalur menuju berkas. Bentuk ini bersifat relatif, artinya browser mencari styles.css di folder yang sama dengan berkas HTML-nya.
Urutan penulisan: bila ada beberapa tag link, browser memuatnya sesuai urutan dokumen. Aturan dari berkas yang ditulis kemudian menimpa aturan yang lebih dulu apabila kekuatan keduanya sama — prinsip cascade yang kita kenal pada Chapter sebelumnya.
Atribut opsional media: <link rel="stylesheet" href="cetak.css" media="print"> hanya diterapkan ketika halaman dicetak, bukan di layar. Tanpa atribut ini, stylesheet berlaku untuk semua media.

Jalur Relatif, Absolut, dan Jebakan 404 #

Nilai href dapat ditulis dalam beberapa bentuk, dan perbedaannya sering menjadi sumber kesalahan:

Penulisan `href`	Arti	Contoh lokasi berkas
`styles.css`	relatif, folder yang sama	berkas HTML dan CSS bersebelahan
`css/styles.css`	relatif, masuk subfolder `css`	HTML di root, CSS di dalam folder `css`
`../gaya/utama.css`	relatif, naik satu folder lalu masuk `gaya`	CSS berada di luar folder HTML
`/css/styles.css`	absolut dari root situs	selalu menuju `domain/css/styles.css`
`https://cdn.example.com/utama.css`	URL lengkap	berkas di server lain

Ketika jalur salah, browser tidak menampilkan pesan besar; halaman hanya tampil tanpa gaya karena berkas gagal dimuat dengan status 404. Cara mengeceknya cepat: buka panel console atau tab Network di DevTools, lalu cari baris stylesheet yang berstatus gagal. Tiga penyebab paling umum adalah nama berkas salah ketik, folder tidak sesuai, dan perbedaan huruf besar-kecil.

Memilih Eksternal, Internal, atau Inline #

Tiga cara menyisipkan CSS yang kita kenal pada Chapter Hubungan HTML dan CSS kini dapat diputuskan dengan kriteria yang jelas:

Cara	Bentuk	Gunakan ketika	Kelemahannya
Eksternal	`<link rel="stylesheet">`	CSS dipakai banyak halaman; proyek sungguhan	satu permintaan berkas tambahan
Internal	blok `<style>` di `<head>`	halaman tunggal, demo, atau latihan	tidak dapat dipakai ulang antarhalaman
Inline	atribut `style="..."`	nilai dinamis dari JavaScript; email HTML	sulit dirawat dan mudah menimpa aturan lain

Praktik default untuk website adalah eksternal: satu berkas CSS melayani semua halaman, browser dapat menyimpannya di cache, dan pembacaan kode menjadi terpisah antara struktur dan tampilan. Internal tetap berguna untuk halaman yang benar-benar berdiri sendiri, sedangkan inline kita simpan untuk kasus yang memang membutuhkannya. Setelah stylesheet terhubung, langkah berikutnya adalah memeriksa hasilnya — alatnya kita siapkan pada Chapter Browser DevTools .

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

css
/* styles.css — gaya bersama untuk semua halaman */
body {
  font-family: system-ui, sans-serif;
  margin: 0;
  padding: 24px;
  background-color: rgb(248, 250, 252);
}
.judul {
  color: rgb(30, 58, 138);
  font-size: 28px;
}
.kartu {
  background-color: rgb(239, 246, 255);
  border: 2px solid rgb(147, 197, 253);
  border-radius: 12px;
  padding: 16px;
  max-width: 480px;
}
.teks {
  color: rgb(71, 85, 105);
  line-height: 1.5;
}