Peran HTML dan CSS

Kita telah mengenal HTML secara menyeluruh: struktur, semantik, form, hingga accessibility. Sejauh ini tampilan contoh kita masih polos karena CSS belum tersentuh. CSS (Cascading Style Sheets) adalah bahasa yang mengatur tampilan halaman, mulai dari warna, ukuran huruf, hingga tata letak. Pada Chapter ini kita memetakan pembagian tugas HTML dan CSS, alasan keduanya diletakkan di file terpisah, serta konsep cascade secara sekilas. Section ini memberi bekal CSS minimum, bukan kursus CSS lengkap.

Pembagian Tugas: Struktur versus Tampilan #

HTML bertugas menyimpan struktur dan makna konten, sedangkan CSS bertugas mengatur presentasi. Ketika kita menulis <h1>Menu Kantin Siti</h1>, HTML menyatakan teks tersebut sebagai heading level tertinggi, bukan CSS. CSS kemudian menentukan ukuran, warna, dan jenis hurufnya.

Pembagian ini berdampak langsung pada accessibility. Screen reader membaca struktur dari markup: heading tetap terbaca sebagai heading walaupun warnanya diubah. Aturan praktisnya, makna ditaruh di HTML dan penampilan ditaruh di CSS.

Tampilan Tanpa CSS dan Dengan CSS #

Browser memiliki gaya bawaan (default) untuk setiap elemen, dan itulah alasan halaman tanpa CSS tetap terbaca: heading tampil besar dan tebal, link biru bergaris bawah, paragraf berjarak antarbaris yang wajar. CSS bekerja dengan menimpa gaya bawaan tersebut.

Mengapa HTML dan CSS Dipisah #

Praktik industri menempatkan CSS di file terpisah dengan alasan kuat:

• Maintainability: perubahan tampilan cukup dilakukan pada satu file CSS tanpa menyentuh markup di banyak halaman.
• Aksesibilitas: markup semantik tetap bersih, sehingga screen reader tetap membaca struktur dengan benar.
• Caching: browser menyimpan file CSS di cache dan memakainya ulang; pengunjung hanya mengunduhnya sekali.
• Konsistensi: satu aturan CSS berlaku untuk seluruh halaman sehingga identitas visual situs seragam.

Bila gaya ditulis campur di markup, perubahan kecil menuntut penyuntingan di banyak tempat; karena itu pemisahan file kita ikuti pada seluruh contoh section ini.

Cascade: Penentu Gaya yang Menang #

CSS membawa kata cascading pada namanya karena memiliki mekanisme cascade: cara CSS menentukan aturan mana yang menang bila beberapa aturan menyasar elemen yang sama. Dua faktor utamanya adalah specificity (seberapa spesifik selector) dan urutan penulisan (aturan yang ditulis belakangan menang bila setara). Sebagai gambaran, aturan dengan selector class seperti .nama menimpa aturan dengan selector element seperti p karena class lebih spesifik.

Contoh HTML dan CSS Terpisah #

Contoh berikut memisahkan konten dan gaya ke dalam dua file: kartu-profil.html dan kartu-profil.css. Fokus kita pada pemisahan file; nama properti yang muncul dibahas bertahap pada chapter berikutnya:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kartu Profil Budi</title>
  <link rel="stylesheet" href="kartu-profil.css">
</head>
<body>
  <article class="kartu">
    <h1>Kartu Profil</h1>
    <p class="nama">Budi Santoso</p>
    <p class="peran">Penulis tutorial di example.com</p>
    <p>Jl. Melati No. 10, Bandung</p>
  </article>
</body>
</html>

body {
  font-family: sans-serif;
  background-color: #f3f4f6;
}

.kartu {
  background-color: #ffffff;
}

.nama {
  color: #1a6b54;
  font-size: 24px;
}

.peran {
  color: #6b7280;
}

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Kartu putih di atas latar halaman berwarna abu-abu muda
  - Nama "Budi Santoso" berukuran besar dengan warna hijau
  - Keterangan "Penulis tutorial di example.com" berwarna abu-abu
  - Alamat "Jl. Melati No. 10, Bandung" berwarna gelap bawaan body

Mari kita telaah peran setiap baris penting di atas:

1. Baris 7 HTML (<link rel="stylesheet" ...>): menghubungkan file CSS; detailnya dibahas pada Chapter Menghubungkan File CSS.
2. Baris 10 HTML (<article class="kartu">): elemen konten berlabel class kartu, sasaran selector .kartu.
3. Baris 12-13 HTML (class="nama", class="peran"): dua paragraf berlabel berbeda agar dapat digaya berbeda.
4. Baris 1-4 CSS (body { ... }): selector element body memberi jenis huruf dan latar dasar halaman.
5. Baris 6-8 CSS (.kartu): selector class yang memutihkan latar kartu.
6. Baris 10-13 CSS (.nama): selector class yang mewarnai dan memperbesar teks nama.
7. Baris 15-16 CSS (.peran): selector class yang mewarnai keterangan peran dengan abu-abu.

Contoh di atas memperlihatkan pembagian tugas yang bersih: file HTML bebas deklarasi gaya, file CSS bebas konten. Chapter berikutnya membahas elemen link lebih rinci, termasuk path relatif dan manfaat caching-nya.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Apa itu CSS
• MDN Web Docs — CSS Styling basics: Getting started
• MDN Web Docs — CSS cascade

body {
  font-family: sans-serif;
  background-color: #f3f4f6;
}

.kartu {
  background-color: #ffffff;
}

.nama {
  color: #1a6b54;
  font-size: 24px;
}

.peran {
  color: #6b7280;
}

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kartu Profil Budi</title>
  <link rel="stylesheet" href="kartu-profil.css">
</head>
<body>
  <article class="kartu">
    <h1>Kartu Profil</h1>
    <p class="nama">Budi Santoso</p>
    <p class="peran">Penulis tutorial di example.com</p>
    <p>Jl. Melati No. 10, Bandung</p>
  </article>
</body>
</html>