Memahami berbagai unit dan cara penulisan nilai di CSS itu penting biar kita bisa ngatur ukuran, spasi, dan properti lain dengan lebih presisi dan fleksibel.

Jadi Ahli Ukur di CSS: Kenalan Sama Satuan Panjang, Warna, dan Nilai Lainnya!

Selama ini kita udah sering banget pake nilai kayak 16px, blue, #FF0000, atau 1.5 di properti-properti CSS. Nah, di balik nilai-nilai itu, ada berbagai jenis unit ukuran dan format nilai yang punya karakteristik dan kegunaannya masing-masing.

Ngertiin beda antar unit dan cara pake nilai yang bener itu krusial buat bikin desain yang presisi, responsif, dan gampang di-maintain. Yuk, kita dalemin lagi dunia satuan dan nilai di CSS!

Unit Ukuran (Length Units): Absolut vs. Relatif

Unit ukuran di CSS dipake buat nentuin panjang, lebar, tinggi, ukuran font, margin, padding, dll. Secara umum, ada dua kategori utama:

1. Unit Absolut (Absolute Length Units)

Unit absolut ini ukurannya tetap (fixed) dan gak terpengaruh sama ukuran elemen lain atau ukuran layar (kecuali kalau layarnya sendiri yang resolusinya beda). Mereka lebih sering dipake buat media cetak atau kalau kamu butuh ukuran yang bener-bener presisi dan gak berubah.

px (Pixels):
- Ini unit absolut yang paling sering dipake buat web. Satu pixel itu satu titik di layar.
- Cocok buat ngatur border-width, kadang font-size kalau mau kontrol penuh, atau ukuran elemen yang fix.
- Contoh: font-size: 16px;, border: 1px solid black;, width: 600px;
pt (Points): 1 point = 1/72 inch. Lebih umum dipake buat media cetak (print).
cm (Centimeters), mm (Millimeters), in (Inches): Unit fisik, juga lebih cocok buat media cetak.

Buat web development, px adalah unit absolut yang bakal paling sering kamu temui dan pake.

2. Unit Relatif (Relative Length Units)

Unit relatif ini ukurannya fleksibel dan bergantung (relatif) sama ukuran properti lain, ukuran elemen parent, atau ukuran viewport. Unit relatif ini penting banget buat bikin desain yang responsif dan gampang di-scale.

% (Persentase):
- Nilainya diitung relatif terhadap nilai properti yang sama di elemen parent-nya.
- Misalnya, kalau parent punya width: 600px;, maka width: 50%; di elemen anak bakal jadi 300px.
- Kalau dipake buat font-size, dia relatif terhadap font-size parent.
- Kalau dipake buat line-height, dia relatif terhadap font-size elemen itu sendiri.
- Contoh: width: 75%;, font-size: 120%;
em:
- Unit ini relatif terhadap font-size dari elemen itu sendiri (kalau propertinya bukan font-size) atau font-size dari elemen parent-nya (kalau propertinya font-size).
- Misalnya, kalau font-size elemen adalah 16px, maka 1em sama dengan 16px, dan padding: 2em; bakal jadi 32px.
- Kalau ada nesting elemen dan tiap elemen pake em buat font-size, efeknya bisa "bertumpuk" (compounding), yang kadang bisa bikin bingung.
- Contoh: margin-bottom: 1.5em;, font-size: 0.9em;
rem (Root EM):
- Ini "saudaranya" em yang lebih gampang di-manage. rem itu relatif terhadap font-size dari elemen root (<html>) aja.
- Jadi, gak peduli seberapa dalem nesting elemenmu, 1rem bakal selalu ngacu ke ukuran font yang diset di <html>. Ini bikin rem jadi pilihan yang sangat baik buat ngatur font-size dan spasi secara konsisten di seluruh website dan gampang di-scale buat responsivitas.
- Default font-size <html> di browser biasanya 16px, jadi 1rem = 16px, 2rem = 32px, dst.
- Contoh: html { font-size: 100%; /* atau 16px */ } body { font-size: 1rem; /* jadi 16px */ } h1 { font-size: 2.5rem; /* jadi 40px */ } .box { padding: 1.5rem; }
Unit Relatif terhadap Viewport:
- vw (Viewport Width): 1vw = 1% dari lebar viewport (area jendela browser yang keliatan).
- vh (Viewport Height): 1vh = 1% dari tinggi viewport.
- vmin: 1vmin = 1% dari dimensi viewport yang lebih kecil (antara lebar atau tinggi).
- vmax: 1vmax = 1% dari dimensi viewport yang lebih besar.
- Unit-unit ini super berguna buat bikin elemen yang ukurannya bener-bener nyesuaiin ukuran layar, misalnya bikin section hero yang tingginya selalu full layar (height: 100vh;).
- Contoh: header { height: 10vh; } .judul-gede { font-size: 5vw; }

Kapan Pake Absolut vs. Relatif?

Pake unit absolut (px) buat hal-hal yang kamu mau ukurannya tetep, kayak border-width tipis, atau kadang buat width/height elemen yang emang gak perlu responsif.
Pake unit relatif (rem, %, em, vw/vh) buat sebagian besar hal lain, terutama font-size, padding, margin, dan dimensi layout, biar desainmu lebih fleksibel dan responsif. rem jadi favorit buat font-size dan spasi.

Format Nilai Warna (Review Singkat)

Kita udah bahas ini di materi Warna & Background, tapi sekadar ngingetin lagi format nilai warna yang umum:

Nama Warna: red, blue, transparent (buat transparan total).
HEX: #RRGGBB (misal, #00FF00) atau #RGB (misal, #F00).
RGB/RGBA: rgb(R,G,B) (misal, rgb(255,0,0)) atau rgba(R,G,B,A) (misal, rgba(0,0,255,0.5)). Nilai R, G, B dari 0-255, A dari 0.0-1.0.
HSL/HSLA: hsl(H,S,L) (misal, hsl(120,100%,50%)) atau hsla(H,S,L,A) (misal, hsla(0,100%,50%,0.7)). H dari 0-360, S & L dari 0-100%, A dari 0.0-1.0.

Nilai URL: `url()`

Buat ngasih tau lokasi file eksternal (kayak gambar buat background-image atau file font buat @font-face), kita pake fungsi url().

Sintaks: url("path/ke/file.ekstensi") atau url(path/ke/file.ekstensi) (tanda kutip opsional kalau path-nya simpel, tapi lebih aman pake kutip).

Path-nya bisa relatif atau absolut.

css

body {
    background-image: url("../images/latar.jpg"); /* Path relatif */
}
@font-face {
    src: url("https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVZ0b.woff2"); /* Path absolut */
}

Fungsi CSS: `calc()` dan `var()`

CSS juga punya beberapa "fungsi" bawaan yang bisa ngebantu kita ngitung nilai atau pake variabel.

calc() (Calculate / Kalkulasi):
- Ngebolehin kamu buat ngelakuin operasi matematika dasar (+, -, *, /) buat nentuin nilai properti.
- Yang keren, kamu bisa ngombinasiin unit yang beda di dalem calc()! (Misal, 100% - 50px).
- Spasi di sekitar operator (+, -, *, /) itu penting, terutama buat + dan -.
css
```
.lebar-dinamis {
    width: calc(100% - 80px); /* Lebar 100% dikurang 80px */
}
.tinggi-spesifik {
    height: calc(100vh - 60px - 20px); /* Tinggi viewport dikurang tinggi header dan footer */
}
.font-kalkulasi {
    font-size: calc(1rem + 0.5vw); /* Ukuran font dasar ditambah sedikit persentase lebar viewport */
}
```
calc() ini super berguna buat layouting responsif yang butuh perhitungan presisi.

var() (CSS Custom Properties / Variabel CSS):

Ini fitur yang powerful banget! Kamu bisa ngedefinisiin variabelmu sendiri di CSS, terus dipake ulang di banyak tempat.
Cara definisiin variabel (custom property): Diawali dua tanda hubung (--), biasanya di elemen :root (yang sama kayak <html>) biar jadi variabel global.
Cara pake variabel: var(--nama-variabel, nilai-fallback-opsional)

css

/* Definisikan variabel di :root */
:root {
    --warna-utama: steelblue;
    --warna-teks: #333;
    --font-dasar: Arial, sans-serif;
    --spasi-standar: 15px;
}
 
/* Gunakan variabelnya */
body {
    font-family: var(--font-dasar);
    color: var(--warna-teks);
}
 
h1 {
    color: var(--warna-utama);
}
 
.tombol {
    background-color: var(--warna-utama);
    padding: var(--spasi-standar);
    /* Contoh dengan fallback, kalau --warna-tombol-teks gak ada, pake putih */
    color: var(--warna-tombol-teks, white); 
}

CSS Custom Properties ini bikin kode CSS-mu jadi lebih gampang di-maintain (kalau mau ganti warna utama, cukup ubah di satu tempat), lebih gampang bikin tema, dan bisa dimanipulasi pake JavaScript juga.

Ngertiin berbagai unit dan cara nulis nilai di CSS ini bakal ngebuka banyak banget kemungkinan buat ngontrol tampilan dengan lebih akurat dan fleksibel. Biasain pake rem buat font-size dan spasi, manfaatin calc() buat perhitungan dinamis, dan jangan ragu pake CSS Custom Properties (var()) buat kode yang lebih terstruktur dan gampang diubah!

Kuis Unit & Nilai CSS

Pertanyaan 1 dari 5

Manakah dari berikut ini yang merupakan contoh unit ukuran ABSOLUT di CSS?

Unit & Nilai CSS