Section ini membahas values, units, dan sizing sebagai bagian dari Course CSS. Ikuti chapter di dalamnya secara berurutan karena setiap chapter dibangun di atas pemahaman chapter sebelumnya. Gunakan demo interaktif pada setiap halaman untuk melihat langsung efek kode yang sedang dibahas.

# Nilai CSS

Petakan lima jenis nilai CSS — keyword, length, percentage, color, dan function — sebagai fondasi sebelum mengulas satu per satu satuan ukurannya.

Buka → # Px dan Persen

Memahami px sebagai satuan tetap dan persen sebagai nilai relatif, lengkap dengan catatan aksesibilitas dan panduan kapan masing-masing tepat dipakai.

Buka → # Em dan Rem

Menguasai satuan relatif font — rem yang berakar pada root dan em yang mengikuti konteks — untuk tipografi dan jarak yang menghormati preferensi pengguna.

Buka → # Viewport Units

Memanfaatkan vw dan vh untuk ukuran berbasis layar, memahami masalah address bar ponsel beserta solusi dvh, dan menghindari jebakan 100vw.

Buka → # Width dan Height

Menyetel dimensi elemen secara eksplisit sambil memahami mengapa perilaku default auto sering kali menjadi pilihan yang paling aman.

Buka → # Min-Width dan Max-Width

Mengganti ukuran tetap dengan rentang aman menggunakan min-width dan max-width, dari gambar responsif dan kolom teks hingga pola wadah terpusat.

Buka → # Min-Height dan Max-Height

Berikan batas bawah dan batas atas pada tinggi elemen agar tata letak tetap konsisten saat konten berubah.

Buka → # Nilai Auto

Pahami makna nilai auto pada width, height, dan margin agar perilaku ukuran bawaan CSS bisa diprediksi.

Buka → # Fungsi calc()

Hitung campuran satuan langsung di CSS dengan calc(), dari lebar sisa ruang hingga tipografi yang mengikuti layar.

Buka → # Fungsi min(), max(), dan clamp()

Beri batas bawah dan batas atas pada nilai CSS dengan min(), max(), dan clamp() untuk ukuran fluid yang aman.

Buka → # Intrinsic Sizing

Biarkan konten menentukan lebar elemen dengan kata kunci max-content, min-content, dan fit-content.

Buka → # Memilih Unit yang Tepat

Peta keputusan memilih satuan CSS untuk tiap property, dari font-size hingga section setinggi layar.

Buka →