Apa Itu CSS

Halaman web yang ditulis hanya dengan HTML akan tampil sebagai dokumen berwarna hitam di atas putih dengan font default browser: teks berjajar dari atas ke bawah, tautan berwarna biru dengan garis bawah, dan tabel tanpa gaya apa pun. CSS (Cascading Style Sheets) adalah bahasa yang mengubah dokumen polos tersebut menjadi halaman yang berwarna, terstruktur, dan nyaman dibaca. Pada Chapter ini kita akan mengenal apa itu CSS, apa saja yang dapat diatur oleh CSS, dan membuktikannya dengan contoh pertama yang dapat Anda buka sendiri di browser.

Posisi CSS di Antara HTML dan JavaScript #

Website modern dibangun oleh tiga teknologi yang tugasnya berbeda. HTML menyediakan struktur dan isi: judul, paragraf, gambar, dan tautan. CSS mengatur tampilan struktur tersebut: warna, ukuran, jarak, tata letak, dan efek visual. JavaScript menambahkan perilaku interaktif: menanggapi klik, mengambil data, dan mengubah halaman saat berjalan.

Bayangkan sebuah gedung: HTML adalah rangka beton dan temboknya, CSS adalah cat, keramik, dan tata ruangnya, sedangkan JavaScript adalah listrik dan lift yang membuat gedung merespons penghuninya. Analogi ini memiliki batas: CSS tidak mengubah isi dokumen, melainkan hanya cara isi tersebut disajikan oleh browser.

Tanpa CSS, browser tetap menampilkan halaman karena HTML punya gaya bawaan (user-agent stylesheet). Tanpa HTML, CSS tidak memiliki apa pun untuk ditata. Hubungan keduanya akan kita bedah lebih dalam pada Chapter Hubungan HTML dan CSS .

Apa Saja yang Bisa Diatur CSS #

Cakupan CSS jauh lebih luas dari sekadar “mewarnai teks”. Beberapa kelompok kemampuan yang akan kita pelajari sepanjang Course ini:

Seluruh kemampuan tersebut ditulis dengan pola yang sama: menunjuk elemen, lalu menyatakan properti yang diubah. Pola inilah yang kita lihat pada contoh berikut.

Contoh Pertama: Halaman dengan dan tanpa CSS #

Kode berikut adalah halaman HTML kecil yang didampingi satu aturan CSS. Aturan tersebut menunjuk elemen <h1> dan <p>, lalu mengubah beberapa propertinya. Demo lengkap pada akhir chapter dapat dibuka langsung di browser.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Contoh Pertama CSS</title>
  <style>
    h1 {
      color: rgb(14, 165, 233);
      font-size: 32px;
    }
    p {
      color: rgb(71, 85, 105);
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <h1>Halo, CSS</h1>
  <p>Paragraf ini distyling dengan CSS pertama kita.</p>
</body>
</html>

Hasil di Browser:

Judul "Halo, CSS" tampil berwarna biru langit dengan ukuran 32px.
Paragraf di bawahnya tampil berwarna abu-abu kebiruan dengan
line-height 24px (1,5 dikali font-size default 16px).

Mari kita telaah aturan CSS di dalam blok <style> baris demi baris:

1. Baris 6 (h1 {): aturan dimulai dengan selector h1, yaitu cara menunjuk semua elemen <h1> di halaman. Blok deklarasi dibuka dengan kurung kurawal.
2. Baris 7 (color: rgb(14, 165, 233);): deklarasi pertama mengubah warna teks judul menjadi biru langit. Setiap deklarasi terdiri dari nama properti, tanda titik dua, nilai, dan diakhiri titik koma.
3. Baris 8 (font-size: 32px;): deklarasi kedua memperbesar teks judul menjadi 32 piksel, lebih besar daripada ukuran bawaan browser untuk <h1>.
4. Baris 11 (p {): aturan kedua menunjuk semua elemen <p> menggunakan selector p.
5. Baris 12–13: paragraf diberi warna abu-abu kebiruan dan line-height: 1.5, artinya tinggi tiap baris adalah 1,5 kali ukuran font sehingga teks lebih mudah dibaca.

Cara Kerja Singkat di Balik Browser #

Ketika browser membuka halaman tersebut, browser menjalankan dua langkah sebelum piksel digambar ke layar. Pertama, browser mengubah HTML menjadi pohon dokumen (DOM) yang berisi setiap elemen. Kedua, browser membaca teks CSS, mem-parsing setiap aturan, lalu mencocokkan selector dengan elemen di DOM — proses lengkapnya kita bedah pada Chapter Bagaimana Browser Menerapkan CSS .

Hasil pencocokan itu menghasilkan computed style: daftar nilai akhir untuk setiap properti pada setiap elemen. Anda dapat melihatnya sendiri melalui browser DevTools dengan menekan tombol F12, membuka tab Elements, lalu memilih elemen <h1> — nilai color yang tampil di panel Styles adalah rgb(14, 165, 233), sama persis dengan yang kita deklarasikan.

Demo pada chapter ini memuat penanda uji otomatis (data-expected) yang memverifikasi hasil tersebut: nilai color, font-size, dan line-height pada judul dan paragraf diperiksa langsung oleh harness uji Course ini.