Apa Itu CSS

HTML sudah menyusun teks, gambar, dan tombol menjadi satu halaman, tetapi tanpa bantuan tambahan halaman tersebut tampak polos seperti dokumen sederhana. CSS (Cascading Style Sheets) adalah bahasa yang mengisi bagian tersebut: bahasa ini menentukan warna, ukuran, tata letak, tipografi, dan animasi dari setiap elemen HTML. Pada chapter ini kita akan mengenal ruang lingkup CSS, melihat bentuk kodenya, dan memahami mengapa bahasa ini menjadi salah satu tiga teknologi inti web bersama HTML dan JavaScript.

Peran CSS pada Halaman Web #

Setiap halaman web pada dasarnya terdiri dari tiga lapisan yang bekerja berbeda:

Pemisahan ini penting untuk dipahami sejak awal. File HTML tetap berisi struktur murni, sedangkan seluruh aturan tampilan hidup di CSS. Ketika desain perlu diubah, kita cukup menyunting CSS tanpa menyentuh markup, dan satu berkas CSS dapat mengatur tampilan ratusan halaman sekaligus.

Bentuk Kode CSS #

Aturan CSS ditulis sebagai daftar declaration di dalam blok yang dipilih oleh selector. Mari kita lihat contoh yang paling sering dipakai untuk memahami strukturnya:

h1 {
  color: #1f6f54;
  font-size: 32px;
}

Demo berikut menerapkan aturan itu pada satu judul:

Mari kita telaah potongan kode di atas:

1. h1: bagian ini disebut selector, yaitu pola yang memberi tahu browser elemen mana yang menjadi target aturan. Selector h1 memilih semua elemen <h1> di halaman.
2. { ... }: sepasang kurung kurawal membungkus daftar deklarasi yang berlaku untuk elemen terpilih.
3. color: #1f6f54;: satu declaration terdiri dari property (color) dan value (#1f6f54) yang dipisah titik dua, lalu diakhiri titik koma. Deklarasi ini mengatur warna teks.
4. font-size: 32px;: deklarasi kedua mengatur ukuran huruf. Satu blok aturan boleh memuat banyak deklarasi sekaligus.

Pola selector plus declaration ini berlaku konsisten di seluruh CSS. Berapa pun kompleksnya desain sebuah website, fondasi kodenya tetap bentuk yang sama, hanya selector dan property-nya yang bertambah banyak.

Ruang Lingkup yang Dikuasai CSS #

Cakupan CSS jauh lebih luas daripada sekadar memberi warna. Berikut empat area yang akan kita kuasai sepanjang course ini:

• Warna dan tipografi: mengatur warna teks, latar, font, ukuran huruf, jarak antarbaris, dan perataan.
• Box model: setiap elemen dirender browser sebagai kotak yang terdiri dari content, padding, border, dan margin. Memahami kotak ini adalah kunci mengatur jarak dan ukuran.
• Layout: menyusun elemen satu dimensi dengan Flexbox, dua dimensi dengan CSS Grid, dan menggabungkan keduanya untuk layout halaman utuh.
• Interaksi dan responsivitas: mengubah tampilan saat kursor di atas tombol, menyesuaikan layout untuk ponsel maupun layar lebar, serta menambahkan transisi yang halus.

CSS juga terus berkembang. Fitur seperti container query, fungsi warna modern, dan nesting resmi sudah didukung browser modern, dan kita akan menyentuhnya pada bagian-bagian lanjutan course ini.

Melihat CSS Bekerja #

Berikut demo kecil yang menampilkan satu kartu sebelum dan sesudah diberi aturan CSS. Kartu pertama hanya bertumpu pada tampilan bawaan browser, sedangkan kartu kedua sudah diatur warna, jarak, dan sudutnya:

Kedua kartu memakai markup HTML yang sama persis; yang membedakan hanya aturan CSS yang menyertainya. Inilah kekuatan utama CSS: markup yang rapi dapat menerima banyak variasi tampilan, dan perubahan kecil pada aturan CSS mampu mengubah keseluruhan kesan halaman tanpa menyentuh satu baris HTML pun.

Cara Browser Memproses CSS #

Browser membaca HTML dari atas ke bawah dan membangun struktur dokumen (DOM). Ketika browser menemukan CSS, browser mengurai setiap aturan lalu mencocokkan selector-nya dengan elemen di DOM. Proses pencocokan ini terjadi sangat cepat dan dilakukan ulang setiap ada perubahan, misalnya saat class elemen diganti oleh JavaScript.

Untuk setiap elemen, banyak aturan dapat berlaku sekaligus, kadang dengan nilai property yang saling bertentangan. Browser menyelesaikan benturan tersebut dengan urutan prioritas yang disebut cascade, lalu meneruskan sebagian nilai ke elemen anak melalui mekanisme inheritance. Dua mekanisme inilah yang menjadi topik section Cascade, Inheritance, dan Specificity.

Ringkasan #

CSS adalah bahasa yang mengatur tampilan dokumen HTML, dari warna dan tipografi hingga layout dan animasi. Kode CSS tersusun dari selector dan declaration, dan pola ini berlaku konsisten untuk semua kompleksitas desain. Selanjutnya kita akan melihat bagaimana browser bekerja menerapkan aturan CSS langkah demi langkah, sehingga kita dapat memprediksi hasil setiap aturan yang kita tulis.