Menghubungkan CSS ke HTML

Berkas styles.css sudah berdiri di dalam proyek, tetapi berapa pun isiannya diubah, tampilan halaman tetap tidak bergerak. Penyebabnya sederhana: browser tidak pernah membaca berkas yang tidak dirujuk. CSS hanya berpengaruh setelah dihubungkan ke dokumen HTML, dan pada chapter ini kita memasang sambungan itu sambil memahami jalur berkas (path) yang dipakainya.

Tiga Jalur CSS Masuk ke Halaman #

CSS dapat mencapai halaman melalui tiga cara:

Cara	Bentuk	Dipakai kapan
Berkas eksternal lewat `<link>`	Aturan tersimpan di berkas `.css` terpisah	Pendekatan utama untuk proyek nyata
Blok `<style>` di dalam dokumen	Aturan tertulis langsung di `<head>`	Demo, halaman tunggal, eksperimen cepat
Atribut `style` pada elemen	`<p style="color: ...">`	Kasus khusus; sulit dirawat bila berlebihan

Demo interaktif pada course ini memakai cara kedua karena seluruh kodenya harus muat dalam satu berkas. Untuk proyek sungguhan, kita memakai cara pertama: satu berkas CSS dipakai bersama oleh banyak halaman.

Menghubungkan lewat Tag link #

Sesuai rencana chapter sebelumnya, pindahkan styles.css ke dalam folder baru bernama css di dalam proyek-latihan, lalu tambahkan satu baris <link> pada bagian <head>:

html
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Proyek latihan</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="kartu-sambutan">
    <h1>Selamat datang</h1>
    <p>Halaman ini kini bergaya berkat styles.css.</p>
  </div>
</body>
</html>

Berikut hasilnya bila styles.css sudah berisi aturan untuk kartu sambutan — seluruh aturan di dalamnya kini bekerja pada halaman:

Mari kita bedah baris <link>-nya:

<link>: tag kosong tanpa penutup; tugasnya merujuk sumber daya eksternal.
rel="stylesheet": mendeskripsikan hubungan berkas rujukan dengan halaman; nilai stylesheet memberi tahu browser bahwa berkas ini berisi CSS yang harus diterapkan.
href="css/styles.css": lokasi berkas, ditulis sebagai path relatif terhadap halaman HTML yang memanggilnya.
Posisi di <head>: CSS diletakkan di <head> agar aturan termuat sebelum konten dirender, sehingga halaman tidak tampil polos lalu berubah seketika setelahnya.

Memahami Path Relatif #

Nilai href adalah path relatif: browser mencari berkas mulai dari lokasi dokumen HTML, bukan dari akar komputer. Susunan folder kita kini seperti ini:

text
proyek-latihan/
├── index.html
└── css/
    └── styles.css

Dengan susunan tersebut, css/styles.css dibaca browser sebagai “masuk ke folder css sejajar dengan halaman ini, lalu ambil styles.css”. Penulisan path lain yang perlu dikenal:

Penulisan href	Arti
`css/styles.css`	Folder `css` di lokasi yang sama dengan halaman
`./css/styles.css`	Sama dengan di atas; `./` berarti “folder ini”
`../css/styles.css`	Naik satu folder, lalu masuk ke folder `css`
`/css/styles.css`	Berawal dari akar situs; gagal bila halaman dibuka langsung lewat `file://`

Path dengan ../ dibutuhkan saat halaman berada di dalam subfolder. Bila ada berkas halaman/tentang.html yang perlu memakai CSS yang sama, rujukannya menjadi:

html
<link rel="stylesheet" href="../css/styles.css">

Ketika CSS Tidak Muncul #

CSS yang tidak terhubung tidak menimbulkan error dramatis; halaman tetap tampil, hanya saja polos. Gejala, penyebab, dan penanganannya:

Gejala	Penyebab umum	Solusi
Halaman tampil tanpa gaya sama sekali	href salah ketik atau folder tidak sesuai	Bandingkan href dengan struktur folder sebenarnya
Console DevTools menampilkan 404 untuk styles.css	Berkas tidak ada di lokasi yang ditunjuk	Perbaiki href atau pindahkan berkasnya
Sebagian aturan berlaku, sebagian hilang	Ada kesalahan sintaks sebelum aturan yang bersangkutan	Periksa kurung kurawal dan titik koma pada berkas CSS
Gaya berlaku di index.html, tidak di halaman lain	Halaman lain ada di subfolder sehingga path berbeda	Sesuaikan path, misalnya `../css/styles.css`

Cara paling cepat memastikan berkas termuat: buka DevTools (F12), pilih tab Network, lalu muat ulang halaman. Baris styles.css dengan status 200 berarti berkas berhasil diambil; status 404 berarti browser tidak menemukannya. Tab Console juga mencetak peringatan serupa, lengkap dengan alamat yang gagal diakses.

Ringkasan #

Tag <link rel="stylesheet"> pada <head> adalah sambungan resmi antara HTML dan CSS; nilai href-nya berupa path relatif yang dibaca browser dari lokasi halaman. Ketika gaya tidak muncul, tab Network dan Console di DevTools langsung menunjukkan apakah berkasnya gagal dimuat. Dengan berkas yang sudah tersambung, chapter berikutnya merapikan struktur folder proyek agar tetap sehat saat berkas bertambah banyak.