Selector, Warna, dan Font di CSS

Ilustrasi target membidik palet warna dengan kaca pembesar

Episode lalu kamu belajar anatomi satu aturan CSS. Sekarang kita bedah separuh pertama dari kekuatan CSS: selektor, cara membidik elemen mana yang kena gaya. Ditambah dua topik yang paling sering bikin website terlihat amatir atau profesional dalam lima detik pertama: warna dan font. Ini episode kedua dari seri CSS Basic, lanjutan dari episode Kenalan dengan CSS.

Dua persepsi salah yang perlu diluruskan. Pertama, banyak pemula mengira selektor cuma soal nama tag dan class, lalu frustrasi ketika gayanya "tidak mempan" atau malah kena elemen yang tidak diinginkan. Padahal CSS punya sistem bidikan berlapis, dari yang kasar sampai yang presisi, termasuk membidik berdasarkan kondisi seperti "saat mouse di atasnya". Kedua, banyak yang memilih warna dan font berdasarkan "yang penting beda" atau asal comot dari color picker. Padahal warna punya format dengan kegunaannya masing-masing, dan font punya aturan keterbacaan yang kalau dilanggar membuat website terlihat murahan seketika.

Selektor, Sistem Bidikan CSS

Bayangkan selektor seperti alamat surat. p itu seperti menulis "kepada seluruh warga kota", semua paragraf kena. .peringatan seperti "kepada warga RT 05", hanya elemen ber-class itu yang kena. #menu-utama seperti menulis nama lengkap plus NIK, tepat satu elemen yang kena.

Selektor tag: p { }, h1 { }. Membidik semua elemen dengan tag itu. Kasar tapi berguna untuk gaya dasar.
Selektor class: .tombol { }. Membidik semua elemen dengan class="tombol". Satu elemen boleh punya banyak class, satu class boleh dipakai banyak elemen. Ini selektor kerja harianmu.
Selektor ID: #kepala { }. Membidik satu elemen unik dengan id="kepala". ID tidak boleh dipakai dua kali dalam satu halaman.
Selektor gabungan: h1, h2, h3 { } (koma artinya "atau", ketiganya kena gaya yang sama).
Selektor turunan: nav a { } (spasi artinya "di dalam", semua link yang ada di dalam nav). ul > li (tanda > artinya anak langsung, cucu tidak kena).
Selektor atribut: a[target="_blank"] { }. Membidik elemen berdasarkan atributnya.

/* semua paragraf */
p { line-height: 1.6; }

/* elemen ber-class tombol */
.tombol { padding: 10px 20px; }

/* tepat satu elemen ber-id */
#logo { width: 120px; }

/* semua link DI DALAM nav */
nav a { text-decoration: none; }

/* li yang anak LANGSUNG dari ul */
ul > li { margin-bottom: 8px; }

Kenapa class jadi favorit profesional? Karena class bisa dipakai ulang dan digabung. Satu tombol bisa punya class="tombol tombol-besar tombol-oranye", tiap class mengatur satu aspek. ID terlalu kaku (satu elemen saja) dan punya spesifisitas yang terlalu tinggi sehingga susah ditimpa nanti. Aturan praktisnya: pakai class untuk styling, simpan ID untuk JavaScript atau anchor link.

Berhenti dan tebak dulu! HTML-nya seperti ini. CSS mana yang HANYA mewarnai link di dalam nav, tanpa menyentuh link lain di halaman?

<nav><a href="#">Beranda</a></nav>
<p>Baca <a href="#">artikel</a> selengkapnya</p>

Jawaban: nav a { color: ...; }. Spasi di antara nav dan a artinya "semua a yang berada di dalam nav, sedalam apa pun". Kalau kamu menulis a { } saja, link di dalam paragraf ikut kena. Kalau menulis nav > a { }, linknya tidak kena karena a di sini bukan anak langsung (dia anak langsung sih, tapi pola pikirnya: > hanya turun satu level). Selektor turunan adalah cara paling aman membidik konteks tanpa menambah class baru.

Pseudo-class, Gaya yang Bereaksi

Pseudo-class membidik elemen berdasarkan kondisinya, bukan namanya. Ditulis dengan titik dua tunggal.

a:hover { color: #E8590C; }      /* saat mouse di atas link */
button:active { transform: scale(0.97); }  /* saat sedang diklik */
input:focus { border-color: blue; }        /* saat kolom sedang diisi */
li:first-child { font-weight: bold; }      /* item pertama */
li:nth-child(odd) { background: #f5f5f5; } /* item ganjil: 1,3,5... */

:hover adalah yang paling sering dipakai dan paling cepat membuat website terasa hidup. :nth-child() berguna untuk membuat tabel belang-belang (zebra striping) tanpa menambah class manual ke tiap baris. Bedakan dengan pseudo-element (titik dua ganda seperti ::before) yang membidik bagian dari elemen, bukan kondisinya, itu materi lanjutan.

Warna, Tiga Format Satu Makna

CSS menulis warna dalam tiga format utama. Semuanya menghasilkan piksel yang sama, bedanya di kemudahan dibaca manusia:

Hex: #E8590C. Enam digit heksadesimal, dua untuk merah, dua hijau, dua biru. Bentuk pendek #fff artinya #ffffff. Tambah dua digit untuk transparansi: #E8590C80 artinya oranye 50 persen transparan. Format paling umum karena begini cara design tool seperti Figma menampilkannya.
RGB: rgb(232, 89, 12). Tiga kanal 0 sampai 255. Bentuk modern: rgb(232 89 12 / 50%). Enak dipakai kalau kamu mengutak-atik warna lewat JavaScript.
HSL: hsl(22, 90%, 48%). Hue (sudut warna 0-360), saturation (kepekatan), lightness (terang-gelap). Ini format paling intuitif untuk manusia: mau versi lebih gelap dari warna brand? Turunkan lightness-nya, hue tetap sama.

.tombol { background: hsl(22, 90%, 48%); }        /* oranye brand */
.tombol:hover { background: hsl(22, 90%, 40%); }   /* lebih gelap saat hover */
.tombol:active { background: hsl(22, 90%, 34%); }  /* lebih gelap saat diklik */

Perhatikan pola di atas: cukup ubah satu angka (lightness) untuk membuat varian warna yang konsisten. Kalau memakai hex, kamu harus menghitung ulang tiga pasang digit. Untuk sistem warna proyekmu, HSL menghemat banyak sakit kepala. Satu aturan tambahan: jangan andalkan warna saja untuk menyampaikan informasi penting (misalnya error hanya ditandai merah), karena pengguna buta warna tidak akan menangkapnya. Selalu pasangkan dengan teks atau ikon.

Berhenti dan tebak dulu! Kamu punya warna brand hsl(210, 70%, 50%) (biru). Kamu butuh warna latar yang "saudara" dengannya tapi jauh lebih muda untuk background kartu. Apa yang kamu ubah?

Jawaban: naikkan lightness, turunkan saturation, hue tetap 210. Misalnya hsl(210, 40%, 92%). Hue yang sama menjaga "keluarga" warnanya tetap biru, lightness tinggi membuatnya muda, saturation rendah membuatnya lembut tidak menyilaukan. Inilah keunggulan HSL: kamu berpikir dalam bahasa manusia ("lebih muda", "lebih lembut"), bukan dalam angka heksadesimal acak.

Font, Jangan Sampai Norak

Tiga properti font yang paling penting:

font-family: jenis huruf. Selalu tulis daftar cadangan dipisahkan koma, karena tidak semua komputer punya font yang sama: font-family: "Segoe UI", Arial, sans-serif;. Browser mencoba dari kiri, yang tidak ada dilewati.
font-size: ukuran. Untuk isi artikel, 16-18px adalah zona nyaman dibaca. Judul bertingkat lebih besar.
font-weight: ketebalan, dari normal sampai bold, atau angka 100-900.

Aturan praktisnya: maksimal dua jenis font dalam satu website (satu untuk judul, satu untuk isi), dan pastikan kontras warna teks dengan latarnya cukup. Teks abu-abu muda di atas latar putih memang terlihat "minimalis", tapi menyiksa mata. Kalau ragu, teks gelap di atas latar terang tidak pernah salah.

Kuis cepat: Manakah pernyataan yang benar tentang selektor?

Latihan: Sistem Warna Mini

Kembali ke style.css halaman profilmu:

Definisikan palet memakai HSL: satu warna brand (pilih hue favoritmu), satu warna hover (lightness turun 8 persen), satu warna latar kartu (lightness di atas 90 persen, saturation rendah).
Terapkan dengan selektor yang tepat: nav a:hover untuk efek hover menu, .kartu:nth-child(odd) atau variasinya untuk variasi kartu.
Tambahkan font-family dengan daftar cadangan di body, dan atur line-height: 1.6 untuk paragraf supaya enak dibaca. Jangan cuma mengetik ulang contoh artikel, pilih sendiri hue dan fontnya.
Bonus: buat class .tombol dengan tiga varian ukuran (.tombol-kecil, .tombol-besar) yang digabung di HTML seperti class="tombol tombol-besar". Rasakan cara class digabung.

Di episode berikutnya, Margin, Padding, Border, dan Konsep Box Model, kita membahas alasan nomor satu kenapa layout pemula selalu "ukurannya tidak pas": setiap elemen adalah kotak berlapis, dan width yang kamu tulis ternyata bukan lebar totalnya. Setelah paham ini, setengah misteri CSS akan hilang.