Nilai CSS

Setiap deklarasi CSS selalu berupa pasangan: property di kiri titik dua dan value di kanannya. Pada section Selectors kita sudah menguasai cara menunjuk elemen; sekarang giliran sisi kanan deklarasi yang menentukan hasilnya. Value menentukan seberapa besar teks tampil, warna apa yang dipakai, dan bagaimana elemen menyesuaikan diri dengan ruang di sekitarnya. Chapter ini memetakan jenis-jenis value yang akan kita temui di seluruh course, sehingga ketika bertemu satuan baru, kita langsung tahu kelompok mana yang sedang dibahas.

Peta Jenis Nilai #

Spesifikasi CSS mengelompokkan value ke dalam beberapa jenis besar. Tabel berikut menjadi peta yang akan kita pakai sepanjang section Values, Units, dan Sizing:

Jenis	Contoh	Dipakai untuk
Keyword	`bold`, `auto`, `none`, `solid`	nilai bawaan spesifikasi yang tinggal dipilih
Length	`16px`, `1.5rem`, `2em`, `60vw`	ukuran: font-size, lebar, tinggi, jarak
Percentage	`50%`, `100%`	ukuran relatif terhadap sebuah acuan
Color	`#14503a`, `rgb(...)`, `teal`	warna teks, latar, border
Function	`calc()`, `var()`, `min()`	menghitung atau mengambil nilai secara dinamis

Setiap property hanya menerima jenis value tertentu. Property color menerima value warna tetapi menolak 16px; property width menerima length dan percentage tetapi menolak bold. Kebiasaan ini yang membuat pesan peringatan DevTools mudah dibaca: bila value tidak cocok untuk property tersebut, deklarasi diabaikan dan muncul tanda peringatan.

Keyword: Nilai yang Tinggal Dipilih #

Keyword adalah kata baku yang maknanya sudah didefinisikan spesifikasi. Kita menuliskannya apa adanya, tanpa tanda kutip dan tanpa satuan:

css
h2 {
  font-weight: bold;
  text-transform: uppercase;
}

.spanduk-promo {
  border-style: solid;
}

Keyword terbagi dua kelompok. Keyword nilai seperti bold, auto, none, dan solid mengisi property tertentu sesuai maknanya. Keyword global seperti inherit, initial, dan unset berlaku untuk semua property dan mengatur perilaku pewarisan — kita sudah mempelajarinya pada section Cascade, Inheritance, dan Specificity.

Length dan Percentage #

Length ditulis sebagai angka yang menempel pada satuan: 16px, 1.5rem, 2em, 60vw. Angka boleh desimal, dan angka 0 boleh ditulis tanpa satuan karena hasilnya sama untuk semua satuan. Selain angka nol, satuan wajib — font-size: 16 tanpa satuan bukan length dan akan diabaikan browser.

Percentage ditulis angka plus tanda %. Berbeda dengan length, percentage tidak punya makna sendiri: browser menghitungnya dari sebuah acuan yang ditentukan property-nya. width: 50% berarti 50% lebar elemen induk, sedangkan font-size: 120% berarti 120% font-size induk. Acuan inilah yang membuat percentage luwes sekaligus rawan salah baca.

css
.paragraf-dasar {
  font-size: 1rem;      /* 16px pada root bawaan */
  line-height: 1.6;
  color: #334155;
}

.paragraf-lead {
  font-size: 120%;      /* 120% dari font-size induknya */
  color: teal;
}

Kedua paragraf dipanggungkan berdampingan dalam satu elemen induk:

Function: Nilai yang Dihitung #

Function adalah value berbentuk fungsi yang menghasilkan nilai saat browser menghitungnya. Dua function yang paling sering muncul:

css
.kartu-utama {
  width: calc(100% - 32px);
  padding: var(--jarak-kartu, 16px);
}

Mari kita telaah:

calc(100% - 32px): mengurangi dua nilai berbeda satuan — 100% lebar induk dikurangi 32px. Browser yang melakukan perhitungannya, bukan kita.
var(--jarak-kartu, 16px): mengambil nilai dari custom property bernama --jarak-kartu; angka kedua adalah cadangan bila custom property tersebut belum didefinisikan.

Function lain akan kita temui sepanjang course: rgb() untuk warna, min(), max(), dan clamp() untuk ukuran luwes, serta url() untuk sumber daya seperti font dan gambar.

Satu kartu bisa dirakit dari hampir semua jenis value sekaligus — markup-nya sederhana, dan kekayaan tampilannya seluruhnya berasal dari value yang dipilih:

html
<div class="kartu-nilai">
  <h3>Laporan Mingguan</h3>
  <span class="label-status">Terkirim</span>
  <p>Ringkasan aktivitas tim selama seminggu terakhir sudah siap dibaca.</p>
</div>

Daftar catatan di bawahnya merangkum setiap property beserta jenis nilai yang dipakai:

Kesalahan Umum #

Kesalahan	Akibatnya	Perbaikan
Menulis `font-size: 16` tanpa satuan	deklarasi diabaikan browser	tulis `16px` atau `1rem`; hanya `0` dan nilai `line-height` yang sah tanpa satuan
Memberi length pada `color`, misal `color: 16px`	value tidak cocok, gaya tidak jalan	gunakan format warna: keyword, `#hex`, `rgb()`, atau `hsl()`
Memisahkan angka dan satuan: `16 px`	deklarasi diabaikan	satuan harus menempel pada angka: `16px`
Menganggap semua `%` menghitung dari lebar	hasil tidak terduga pada `font-size` dan sejenisnya	cek acuan property sebelum menulis percentage

Ringkasan #

Value adalah sisi kanan setiap deklarasi yang menentukan hasil akhir, dan CSS menyediakan lima jenis besar: keyword, length, percentage, color, dan function. Browser hanya menerima kombinasi property dan value yang valid, sehingga mengenali jenis nilai membuat error lebih cepat terbaca. Mulai chapter berikutnya kita mengulas satuan ukuran satu per satu, dimulai dari pasangan paling dasar: px dan persen.