HTML dan CSS selalu bekerja berpasangan pada halaman web, tetapi keduanya tidak pernah saling menggantikan tugas. HTML bertanggung jawab atas struktur dan isi dokumen: ada judul, ada paragraf, ada daftar, ada gambar. CSS mengambil struktur tersebut, lalu menentukan bagaimana struktur itu disajikan: warna, ukuran, jarak, dan tata letak. Pemisahan tanggung jawab ini disebut separation of concerns dan menjadi alasan utama halaman web modern mudah dirawat. Pada Chapter ini kita membedah hubungan keduanya, mencoba tiga cara menyisipkan CSS, dan membuktikan bahwa halaman tetap terbaca meskipun CSS belum dimuat.

HTML Menyediakan Struktur, CSS Menyediakan Tampilan #

Setiap elemen HTML membawa makna, bukan sekadar bentuk. Elemen <h1> bukan “teks besar di atas”, melainkan judul tingkat pertama; elemen <p> bukan “baris teks biasa”, melainkan paragraf. Browser, screen reader, dan mesin pencari membaca makna tersebut dari struktur HTML — bukan dari tampilannya.

CSS (Cascading Style Sheets ) tidak menambah isi dan tidak mengubah kalimat satu pun. CSS hanya menyajikan ulang isi yang sama: mengubah warna, ukuran, jarak, posisi, hingga tata letak lengkap dengan flexbox atau grid. Konsekuensinya bersifat dua arah: mengganti CSS tidak mengubah konten, dan mengganti konten tidak memerlukan perubahan CSS.

Pembagian tugas keduanya dapat diringkas seperti berikut:

PertanyaanTeknologi yang menjawabContoh
Apa isi halaman?HTMLJudul artikel, paragraf, gambar
Bagaimana isi disajikan?CSSWarna biru, kolom dua sisi, sudut membulat
Apa yang terjadi saat berinteraksi?JavaScriptValidasi form, ambil data

Untuk membuktikan bahwa markup yang identik dapat tampil berbeda, perhatikan dua kartu berikut. Kedua kartu memakai struktur HTML yang persis sama; pembedanya hanya class dan aturan CSS yang menyertainya.

html index.html 
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Dua Tampilan, Satu Markup</title>
  <style>
    .kartu-a,
    .kartu-b {
      width: 300px;
      padding: 16px;
      border-radius: 12px;
    }
    .kartu-a { background-color: rgb(219, 234, 254); }
    .kartu-b { background-color: rgb(254, 226, 226); }
    .kartu-a h2 {
      color: rgb(15, 23, 42);
      font-size: 28px;
    }
    .kartu-a p { color: rgb(71, 85, 105); }
  </style>
</head>
<body>
  <section class="kartu-a">
    <h2>Infokelas Web</h2>
    <p>Kelas dasar untuk penulis konten.</p>
    <p class="sorotan" style="color: rgb(22, 163, 74); font-weight: 700;">Kuota tersisa 12 kursi.</p>
  </section>
  <section class="kartu-b">
    <h2>Infokelas Web</h2>
    <p>Kelas dasar untuk penulis konten.</p>
    <p class="sorotan" style="color: rgb(22, 163, 74); font-weight: 700;">Kuota tersisa 12 kursi.</p>
  </section>
</body>
</html>

Hasil di Browser:

text 
Kedua kartu memakai markup identik. Kartu A tampil selebar 300px dengan
latar biru muda rgb(219, 234, 254) dan sudut membulat 12px; kartu B
memakai markup yang sama namun berlatar merah muda rgb(254, 226, 226).
Judul di kartu A berukuran 28px berwarna rgb(15, 23, 42), dan teks
berclass sorotan berwarna rgb(22, 163, 74) dengan font-weight 700.

Mari kita telaah aturan CSS di atas:

  1. Baris 7–12 (.kartu-a, .kartu-b { ... }): selector list menunjuk dua kartu sekaligus dan mengatur ulang bagian yang sama: lebar 300px, padding 16px, dan sudut membulat 12px. Sifat yang diwarisi struktur, bukan identitas visual, diletakkan di sini.
  2. Baris 13–14: perbedaan warna latar ditulis terpisah per class. Inilah satu-satunya baris yang membuat kartu A dan kartu B terlihat berbeda.
  3. Baris 15–18 (.kartu-a h2 { ... }): selector turunan menunjuk judul di dalam kartu A; ukuran 28px dan warna rgb(15, 23, 42) hanya berlaku di dalam konteks tersebut.
  4. Baris 19 (.kartu-a p { ... }): paragraf mendapat warna abu-abu kebiruan, sedangkan elemen dengan class sorotan diberi gaya inline pada HTML sehingga tampil hijau dengan ketebalan teks 700.

Tiga Cara Menyisipkan CSS #

Sejauh ini kita menulis CSS di dalam elemen <style>. Sebenarnya ada tiga jalur untuk menyandingkan CSS dengan HTML:

CaraBentuk penulisanCocok untuk
Eksternal<link rel="stylesheet" href="styles.css"> pada <head>Website sungguhan; CSS dipakai banyak halaman
Internalblok <style>...</style> di dalam <head>Demo, halaman tunggal, latihan
Inlineatribut style="..." pada satu elemenNilai dinamis dari JavaScript; kasus khusus

Cara eksternal memisahkan CSS ke berkas sendiri sehingga dapat dipakai ulang oleh semua halaman; cara internal menyimpan CSS di dalam dokumen yang sama; cara inline menempelkan deklarasi langsung pada satu elemen tertentu. Ketiganya berlaku sekaligus pada satu halaman, dan urutan penulisan memengaruhi aturan mana yang menang — topik yang dibahas tuntas pada Chapter cascade. Untuk sekarang, cukup kenali bentuknya:

html index.html 
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Profil Siti</title>
  <!-- 1. Eksternal: berkas terpisah, dipakai banyak halaman -->
  <link rel="stylesheet" href="styles.css">
  <!-- 2. Internal: milik dokumen ini -->
  <style>
    .kartu { border: 1px solid rgb(226, 232, 240); border-radius: 12px; }
  </style>
</head>
<body>
  <article class="kartu">
    <h1>Profil Siti</h1>
    <p>Siti menata tampilan kelas daring setiap pekan.</p>
    <!-- 3. Inline: menempel pada satu elemen -->
    <p style="color: rgb(22, 163, 74);">Status: aktif menulis.</p>
  </article>
</body>
</html>

Babak besar cara eksternal — atribut rel, href, media, serta kesalahan jalur yang membuat CSS gagal dimuat — kita bahas khusus pada Chapter Menghubungkan File CSS .

Halaman Tetap Terbaca Tanpa CSS #

Coba bayangkan demo di atas dimuat tanpa stylesheet: judul tetap terbaca sebagai judul, paragraf tetap tersusun dari atas ke bawah, dan tautan tetap terlihat sebagai tautan. Penyebabnya, browser membawa gaya bawaan sendiri yang disebut user-agent stylesheet. Gaya inilah yang membuat halaman tanpa CSS tetap terstruktur, meskipun tampilannya sederhana.

Prinsip ini disebut progressive enhancement: HTML yang bermakna menjadi lapisan dasar, CSS menjadi lapisan penyempurna di atasnya. Ketika stylesheet gagal dimuat karena jaringan lambat atau kesalahan jalur, pembaca tidak kehilangan konten; yang hilang hanyalah tampilan finalnya. Screen reader dan mesin pencari justru bekerja pada lapisan dasar tersebut, bukan pada hasil visual.

Karena itu, biasakan memeriksa halaman dengan CSS dimatikan (misalnya menonaktifkan stylesheet dari browser DevTools yang kita pelajari pada Chapter Browser DevTools ). Apabila urutan bacaan masih logis, struktur HTML kita sudah berada di jalur yang benar.