Kalau kamu sempat bereksperimen setelah Episode 2.01, kemungkinan besar kamu sudah bertemu dua keanehan kecil.
Keanehan pertama: kamu menulis dua aturan untuk element yang sama, lalu hanya satu yang menang. Keanehan kedua: kamu memberi padding dan margin seperti yang dicontohkan, halaman memang jadi lebih lega, tetapi kamu belum benar-benar tahu apa bedanya.
Dua keanehan itu bukan bug, bukan juga browser sedang iseng. Keduanya adalah cara kerja CSS yang paling dasar, dan episode ini khusus untuk melunasinya.
Kita akan membahas tiga hal: cascade, alias cara CSS memutuskan aturan mana yang dipakai; specificity versi ringan, alias kenapa selector tertentu lebih kuat; dan box model, alias cara CSS memandang setiap element sebagai kotak. Sebagai penutup, ketiganya kita pakai untuk membuat sesuatu yang terlihat: kartu artikel yang rapi.
Yang Akan Dipelajari
Di akhir episode ini, kamu akan bisa menjawab pertanyaan "kenapa style saya tidak muncul" dengan lebih tenang, karena kamu paham dua penyebab paling umum: kalah urutan atau kalah spesifik.
Kamu akan mengenal box model: content, padding, border, dan margin. Property margin dan padding yang di Episode 2.01 baru kita pakai seperlunya akan mendapat penjelasan utuhnya di sini, ditambah satu anggota baru bernama border.
Praktiknya, dua section di halaman profil belajarmu akan berubah menjadi kartu yang rapi, lalu kita melakukan dua eksperimen kecil untuk merasakan sendiri cascade dan specificity bekerja.
Kita belum membahas hitungan specificity yang detail, layout, atau ukuran responsive. Kotaknya kita pahami dulu; menyusun kotak-kotak itu adalah cerita episode 2.04.
Cascade: Aturan yang Datang Belakangan Menang
Huruf C pada CSS adalah singkatan dari cascading, mengalir bertingkat seperti air terjun. Maksudnya: aturan-aturan style dibaca mengalir dari atas ke bawah, dan kalau ada beberapa aturan yang sama-sama berhak mengatur element yang sama, aturan yang datang belakangan yang dipakai.
Coba lihat contoh ini:
h1 {
color: #1f3a5f;
}
h1 {
color: #7a1f2b;
}Dua aturan sama-sama memilih h1, sama-sama mengatur color. Pemenangnya aturan kedua: heading tampil merah tua #7a1f2b, bukan biru gelap.
Ini terdengar sepele, tetapi menjelaskan banyak kejadian misterius. File CSS yang makin panjang kadang menyimpan dua aturan untuk element yang sama tanpa kita sadar, satu di baris 10, satu lagi di baris 90. Yang baris 90 menang, dan kita bingung kenapa perubahan di baris 10 "tidak jalan".
Jadi kalau sebuah style terasa diabaikan, pertanyaan pertama yang layak diajukan bukan "apakah browser rusak", melainkan "apakah ada aturan lain di bawahnya yang menimpa".
Specificity Ringan: Selector yang Lebih Spesifik Lebih Kuat
Sekarang bagian kedua. Urutan hanya berlaku kalau kekuatan selectornya seimbang. Kalau tidak seimbang, yang lebih spesifik menang, walaupun ditulis lebih dulu.
Kekuatan itu punya nama: specificity, tingkat kespesifikan sebuah selector. Untuk tahap ini, kamu cukup hafal satu perbandingan: selector class lebih spesifik daripada selector element.
Contohnya, ingat paragraf catatan di footer halaman latihanmu:
.catatan {
color: #5f5f5f;
}
p {
color: #1c1c1c;
}Aturan p ditulis belakangan, tetapi paragraf ber-class="catatan" tetap abu-abu. Selector .catatan lebih spesifik daripada p, jadi ia menang walau posisinya di atas. Urutan baru menentukan kalau kedua selector setara, seperti contoh dua h1 tadi.
Cara membacanya enak pakai logika sehari-hari: p itu aturan umum untuk semua paragraf, sedangkan .catatan adalah instruksi khusus yang kita tempelkan sendiri. Instruksi khusus wajar mengalahkan aturan umum.
Specificity sebenarnya punya hitungan yang lebih detail, tetapi untuk seri ini dua tingkat itu sudah membawa kita sangat jauh. Kalau nanti ada style yang membandel, urutan pengecekannya selalu sama: cek dulu ejaan, lalu cek aturan yang lebih spesifik, lalu cek aturan yang datang belakangan.
Box Model: Semua Element Adalah Kotak
Sekarang bagian yang paling terasa di mata. Bagi CSS, setiap element di halaman adalah sebuah kotak, bahkan yang tampak seperti teks biasa. Kotak itu terdiri dari empat lapisan, dari dalam ke luar.
Paling dalam ada content, isi elementnya sendiri: teks, gambar, atau element lain.
Melingkupi content ada padding, jarak antara isi dan tepi kotak. Ini "jarak dalam".
Setelah padding ada border, garis tepi kotak. Selama ini border kotakmu ada tetapi tidak terlihat karena tebalnya nol.
Paling luar ada margin, jarak antara kotak ini dan kotak tetangganya. Ini "jarak luar".
Bayangkan mengirim gelas lewat paket. Gelasnya content. Gulungan gelembung pelindung di sekelilingnya padding. Kardusnya border. Dan jarak antar kardus di dalam mobil kurir supaya tidak saling membentur, itulah margin.
Dalam CSS, keempatnya kita kendalikan seperti ini:
section {
padding: 16px;
border: 1px solid #d9d9d9;
margin-top: 16px;
}Property border menerima tiga bagian sekaligus: tebal garis, gaya garis, dan warnanya. 1px solid #d9d9d9 artinya garis utuh setebal satu piksel berwarna abu terang. Gaya solid inilah yang paling sering dipakai; tanpa menyebut gaya, border tidak akan muncul sama sekali.
Perhatikan juga margin-top. Selain versi serba-sisi seperti margin: 16px, setiap sisi punya property sendiri: margin-top, margin-right, margin-bottom, margin-left, dan keluarga padding- yang sepadan. Kita pakai yang serba-sisi dulu, sisi per sisi menyusul saat dibutuhkan.
Praktik Kecil: Kartu Artikel
Waktunya merapikan. Buka style.css hasil Episode 2.01. Halaman profil belajarmu punya dua <section> sejak Episode 1.04: daftar kategori dan rujukan belajar. Dua bagian itu akan kita ubah menjadi kartu.
Tambahkan aturan berikut di bagian bawah style.css:
section {
background-color: #ffffff;
border: 1px solid #d9d9d9;
padding: 16px;
margin-top: 16px;
}Simpan, lalu refresh browser. Dua section itu sekarang tampil sebagai kartu putih bergaris tepi halus, mengambang rapi di atas latar #f9f7f2 yang kita pasang di episode lalu. Konten yang sama, kesan yang jauh lebih tertata.
Resep kartunya sederhana dan layak diingat: latar yang membedakan dari halaman, border tipis, padding supaya isi tidak menempel ke tepi, dan margin supaya kartu tidak menempel ke tetangganya.
Sekarang dua eksperimen kecil yang tadi dijanjikan.
Eksperimen pertama, merasakan cascade. Tambahkan aturan kedua ini di bawah aturan kartu:
section {
border: 1px solid #1f3a5f;
}Refresh: semua border kartu berubah biru gelap, karena aturan yang datang belakangan menang. Setelah puas melihatnya, hapus lagi aturan eksperimen ini supaya file tetap bersih.
Eksperimen kedua, merasakan specificity. Beri class pada section pertama di index.html, misalnya <section class="kartu-utama">, lalu tambahkan di style.css:
.kartu-utama {
border: 1px solid #1f3a5f;
}Refresh: hanya kartu pertama yang bergaris biru, kartu lain tetap abu. Aturan class menang atas aturan element untuk kartu itu, dan yang lain tetap mengikuti aturan umum section. Eksperimen ini boleh kamu pertahankan; kartu utama yang sedikit menonjol bukan ide yang buruk.
Kalau semua langkah tadi benar, dua kartunya kurang lebih akan tampil seperti ini:
Kartu pertama, Rujukan Belajar, bergaris biru karena class kartu-utama; kartu kedua mengikuti aturan umum section. Foto profil di preview hanya kotak abu-abu pengganti. Kalau punyamu belum seperti ini, mampir dulu ke bagian kesalahan umum di bawah.
Spacing dan Keterbacaan
Ada alasan kenapa padding dan margin bukan sekadar kosmetik. Teks yang menempel ke tepi kotak atau antarbagian yang saling berdempet membuat mata cepat lelah, terutama bagi pembaca dengan gangguan penglihatan atau disleksia.
Ruang kosong itu bukan ruang terbuang. Ia memberi mata tempat beristirahat dan membantu otak mengelompokkan mana yang satu bagian dan mana yang bagian lain. Dua kartu dengan margin yang cukup lebih mudah dipahami daripada dua blok teks yang menyatu.
Patokan praktisnya: kalau ragu, lebihkan sedikit ruangnya. Padding 16px dan margin 16px seperti di praktik tadi adalah titik awal yang nyaman; angka pastinya boleh kamu sesuaikan dengan selera, asal jangan nol.
Kesalahan Umum Pemula
Kesalahan pertama: margin dan padding tertukar. Gejalanya halus: memberi margin padahal ingin isi menjauh dari tepi kotak, atau memberi padding padahal ingin kotaknya menjauh dari tetangga. Kalau bingung, ingat gelas dalam paket: pelindung di dalam kardus itu padding, jarak antar kardus itu margin.
Kesalahan kedua: border tidak muncul karena gayanya tidak ditulis. border: 1px #d9d9d9 terlihat masuk akal, tetapi tanpa solid browser tidak menggambar apa-apa. Tiga bagian: tebal, gaya, warna.
Kesalahan ketiga: angka tanpa satuan. padding: 16 tidak berlaku; CSS butuh satuannya, jadi tulis 16px. Pengecualian hanya untuk nol: margin: 0 sah.
Kesalahan keempat: aturan ganda yang saling menimpa tanpa sadar. File CSS yang mulai panjang sering punya dua aturan untuk selector yang sama di posisi berjauhan. Kalau perubahanmu "tidak jalan", telusuri file dari bawah ke atas; penimpa biasanya bersembunyi di bagian bawah.
Kesalahan kelima: menambah class baru hanya untuk "menang" dari aturan lain, padahal masalahnya cuma urutan. Sebelum membuat selector makin spesifik, coba dulu rapikan urutan aturannya. File CSS yang kekuatannya sederhana lebih mudah dirawat.
Rangkuman
CSS memutuskan aturan mana yang dipakai lewat dua pertimbangan yang kamu kenal sekarang: specificity dulu, baru urutan. Selector class mengalahkan selector element; kalau kekuatannya setara, aturan yang ditulis belakangan menang.
Setiap element adalah kotak berlapis empat: content di tengah, padding sebagai jarak dalam, border sebagai garis tepi, dan margin sebagai jarak luar. Property border butuh tebal, gaya, dan warna sekaligus.
Hari ini halaman profil belajarmu naik kelas: dua section menjadi kartu artikel yang rapi, satu di antaranya kartu utama dengan aksen sendiri. Dan yang lebih penting, kamu sekarang tahu harus memeriksa apa saat sebuah style tidak muncul: ejaan, yang lebih spesifik, lalu yang datang belakangan.
Berikutnya
Kartunya sudah rapi, tetapi hurufnya masih apa adanya. Ukuran teks, jarak antarbaris, dan pilihan warna yang nyaman dibaca adalah ilmu tersendiri, dan halaman artikel adalah tempat ilmu itu paling terasa.
Di Episode 2.03, kita akan membahas tipografi, warna, dan ritme baca: membuat halaman artikelmu bukan hanya tertata, tetapi juga betah dibaca lama-lama.
Belajar Lebih Lanjut
Kalau ingin belajar lebih lanjut, kamu juga bisa membaca beberapa rujukan berikut.