CSS · Bab 3
Warna, Satuan, Tipografi, dan Variabel
Menulis warna dengan nama, hex, rgb, dan hsl, memilih satuan px, rem, em, persen, dan vw, mengatur huruf, tinggi baris, dan perataan teks, serta menyimpan nilai berulang dalam variabel CSS.
Warna dan huruf adalah hal pertama yang dilihat pengunjung. Bab ini membahas cara menulis warna, memilih satuan ukuran, mengatur tipografi, dan menyimpan nilai yang sering dipakai dalam variabel, sehingga warna situs Perpustakaan Pelita cukup diubah di satu tempat.
3.1 Menulis Warna
| Cara | Contoh | Keterangan |
|---|---|---|
| nama | tomato | ada sekitar 150 nama warna bawaan |
| hex | #ff6347 | merah, hijau, biru dalam heksadesimal 00–ff; bentuk pendek #f63 sama dengan #ff6633 |
rgb() | rgb(255 99 71) | nilai 0–255 per kanal; bentuk lama memakai koma: rgb(255, 99, 71) |
rgb() transparan | rgb(255 99 71 / 40%) | angka sesudah / adalah tingkat ketidaktransparanan |
hsl() | hsl(9 100% 64%) | rona (0–360 derajat: 0 merah, 120 hijau, 240 biru), saturasi, kecerahan |
hsl() memudahkan membuat variasi satu warna: cukup ubah angka kecerahannya.
🧪 Coba ubah: ganti angka terakhir hsl() menjadi 55%, lalu 85%. Warnanya sedikit menggelap lalu memucat, dan teks tetap terbaca.
Belum ada output.
Pilih pasangan warna teks dan latar dengan kontras yang cukup. Pedoman WCAG tingkat AA meminta rasio minimal 4,5 : 1 untuk teks berukuran normal. DevTools Chrome menampilkan rasio kontras saat kamu mengklik kotak warna di panel Styles. Jangan pula memakai warna sebagai satu-satunya penanda (misalnya “merah berarti sedang dipinjam” tanpa tulisan), karena sebagian orang tidak membedakan warna dengan baik.
3.2 Satuan Ukuran
| Satuan | Relatif terhadap | Cocok untuk |
|---|---|---|
px | piksel CSS (tetap) | garis tepi tipis, bayangan |
rem | ukuran huruf elemen akar html (bawaan browser umumnya 16px) | ukuran huruf dan jarak |
em | ukuran huruf elemen itu sendiri; untuk font-size, ukuran huruf induknya | jarak yang ikut membesar bersama hurufnya |
% | ukuran induk (untuk width, lebar wadahnya) | lebar wadah |
vw / vh | 1% lebar / tinggi viewport | huruf judul besar, bagian setinggi layar |
rem dianjurkan untuk ukuran huruf karena menghormati pengaturan ukuran huruf yang dipilih pengguna di browsernya. em bisa berlipat bila bersarang: 1.5em di dalam 1.5em menjadi 2,25 kali ukuran asal. Di playground, viewport adalah kotak preview, jadi vw mengikuti lebar preview.
Belum ada output.
3.3 Tipografi
font-family: daftar jenis huruf, dicoba dari kiri ke kanan. Akhiri dengan keluarga umum (sans-serif,serif, ataumonospace) sebagai cadangan. Nama yang mengandung spasi diapit tanda kutip.font-size: ukuran huruf.font-weight: ketebalan, misalnya400(normal) dan700(tebal).font-style: italicuntuk miring.line-height: tinggi baris. Nilai tanpa satuan seperti1.5dianjurkan: artinya 1,5 kali ukuran huruf elemen itu, dan anak-anaknya menghitung ulang dari ukuran hurufnya sendiri.text-align: perataan teks (left,center,right,justify).text-transform: uppercasedanletter-spacinguntuk label kecil.
Belum ada output.
3.4 Variabel CSS
Warna utama perpustakaan dipakai di banyak tempat: judul, tombol, garis kartu. Bila ditulis berulang, mengubahnya berarti mencari satu per satu. Variabel CSS (custom property) menyimpan nilai itu sekali:
- Nama variabel diawali dua tanda hubung, misalnya
--warna-utama, dan membedakan huruf besar dan kecil. - Variabel biasanya dideklarasikan di
:root(elemenhtml) agar berlaku di seluruh halaman. - Nilainya dipakai dengan
var(--warna-utama). Nilai cadangan bisa ditulis sesudah koma:var(--warna-catatan, #b45309). - Variabel diwariskan, dan bisa ditimpa di elemen tertentu untuk mengubah nilai di bagian itu saja.
🧪 Coba ubah: ganti nilai --warna-utama di :root menjadi #15803d. Garis dan judul kartu pertama berubah sekaligus.
Belum ada output.
3.5 Ringkasan
- Warna ditulis dengan nama, hex,
rgb(), atauhsl(). Perhatikan kontras teks dan latar, dan jangan mengandalkan warna saja. pxtetap,remmengikuti ukuran akar,emmengikuti ukuran huruf dan bisa berlipat,%mengikuti induk,vwmengikuti lebar viewport.- Tipografi:
font-familydengan cadangan,font-size,font-weight,line-heighttanpa satuan, dantext-align. - Variabel CSS dideklarasikan di
:rootdengan nama--…dan dipakai lewatvar().