Sebelumnya kita sudah membahas inheritance CSS. Sekarang, kita akan membahas apa saja satuan CSS yang bisa digunakan untuk styling element. Silakan simak pembahasan AneIqbal berikut untuk mengetahui informasi selengkapnya.
Kali ini, kita akan bahas satuan nilai (value) apa saja yang ada di CSS.
Di postingan-postingan sebelumnya, kita sering kali menggunakan px (pixel) di belakang angka value dari property. px itulah salah satu satuan nilai yang ada di CSS.
..dan masih ada lagi selain px.
Satuan nilai yang ada di CSS
Di CSS, kita bisa mengatur nilai dari sebuah elemen sesuai dengan kehendak kita, tapi dengan satuan yang sesuai tentunya.
..karena kalo kita sembarang memakai satuannya, maka tampilan webnya pun jadi nggak sesuai dengan yang kita mau.
Satuan nilai di CSS ini terbagi menjadi 3 jenis, yakni: satuan nilai yang absolut, yang relatif, dan yang persentasi.
Kita bahas 1 per 1.
Satuan nilai yang absolut
Satuan nilai yang absolut ini artinya nilai tersebut merupakan ukuran yang biasa digunakan di media percetakan atau dengan kata lain: ukuran di dunia nyata. Satuan nilai absolut ini juga tidak dipengaruhi oleh elemen lainnya.
Apa aja satuan nilai yang absolut? Ada milimeter (mm), centimeter (cm), inchi (in), point (pt), dan pica (pc).
1 inchi = 72 point (pt). 1 pica = 12 point (pt).
Dari ke-5 satuan nilai absolut di atas, hanya pt yang sering digunakan dalam mendesain tampilan web terutama ukuran font (huruf).
Satuan yang lain nggak pas digunakan untuk mendesain tampilan web karena ukuran di dunia nyata berbeda dengan ukuran di monitor.
Satuan nilai yang relatif
Kalo satuan nilai absolut nggak dipengaruhi oleh elemen lain, maka satuan nilai yang relatif ini dapat dipengaruhi oleh elemen lainnya.
Apa aja satuan nilai yang relatif? Ada pixel (px), Em-height (em), dan X-height (ex).
Dari ke-3 satuan nilai di atas, yang paling sering digunakan adalah pixel (px). Ukuran pixel ini tidak terikat dengan perbandingan media tertentu, makanya bersifat relatif. Ukuran 1px ini sama dengan ukuran 1px di monitor.
Lalu Em-height (em), satuan nilai ini juga masih sering digunakan walaupun tidak sebanyak pixel (px). Satuan nilai ini dipengaruhi oleh elemen lainnya.
Misalnya, ada sebuah elemen p dimana di dalam elemen p tersebut ada elemen b.
<wp-p>Ini adalah sebuah paragraf dan ini akan dicetak <b>tebal</b></wp-p>
Jika kita mengatur elemen p dengan ukuran huruf sebesar 20px dan mengatur elemen b dengan ukuran huruf sebesar 1em, maka ukuran huruf elemen b juga sebesar 20px, karena diturunkan dari elemen induknya (elemen p).
p {
font-size: 20px;
}
b {
font-size: 1em;
}
Seperti ini jadinya. Sama besar ukuran hurufnya.
Kalo kita atur selector b menjadi 1.5em? Maka itu artinya huruf berukuran 1,5 kali lebih besar dari 20px, jadi 30px.
p {
font-size: 20px;
}
b {
font-size: 1.5em;
}
Maka, huruf yang dicetak tebal akan lebih besar, karena menjadi 30px.
Terakhir, X-height (ex), ukuran ini jarang sekali digunakan. kami sendiri nggak pernah pakai satuan ukuran ini saat mendesain tampilan web.
Koma pada nilai property menggunakan tanda titik (.) bukan tanda koma (,). Contoh: 1.5em.
Satuan nilai yang persentasi
Satuan nilai ini menggunakan ukuran per seratus (%) dan relatif terhadap elemen lainnya. Kita ambil contoh dari satuan nilai em di atas tapi kita ubah jadi per seratus (%).
<p>Ini adalah sebuah paragraf dan ini akan dicetak <b>tebal</b></p>
Kode CSSnya:
p {
font-size: 20px;
}
b {
font-size: 100%;
}
Maka hasilnya, ukuran huruf akan sama besar.
Jika nilai persentasi di selector b pada kode di atas diperbesar atau diperkecil, maka ukuran huruf akan membesar atau mengecil mengikuti nilai persentasi yang diberikan.
Jika kita ubah nilai di selector p nya menjadi lebih besar atau kecil, maka ukuran huruf elemen b pun juga akan berubah.
..karena ukuran huruf elemen b relatif terhadap ukuran huruf elemen p.
Melihat ukuran huruf dari semua satuan di atas
Supaya terlihat lebih jelas lagi perbedaan ukuran huruf dari semua satuan di atas, kita langsung saja praktikkan.
Buat file ukuran-huruf.html dengan kode seperti ini:
<!DOCTPYE html>
<html>
<head>
<title>Semua ukuran huruf</title>
<link rel="stylesheet" href="ukuran-huruf.css" />
</head>
<body>
<p>Ini berukuran 20 point</p>
<p class="pertama">Ini berukuran 10 mm</p>
<p class="kedua">Ini berukuran 0.3 inchi</p>
<p class="ketiga">Ini berukuran 1 pica</p>
<p class="keempat">Ini berukuran 20 pixel</p>
<p class="kelima">Ini berukuran 1 em</p>
<p class="keenam">Ini berukuran 5 ex</p>
<p class="ketujuh">Ini berukuran 200%</p>
</body>
</html>
Lalu, file ukuran-huruf.css:
body {
font-size: 20pt;
}
p.pertama {
font-size: 10mm;
}
p.kedua {
font-size: 0.3in;
}
p.ketiga {
font-size: 1pc;
}
p.keempat {
font-size: 20px;
}
p.kelima {
font-size: 1em;
}
p.keenam {
font-size: 5ex;
}
p.ketujuh {
font-size: 200%;
}
Hasilnya akan seperti ini:
Dari kode HTML di atas, semua elemen p berada di dalam elemen body, artinya elemen body adalah elemen induk dari elemen p.
..maka, elemen induk (elemen body) akan menurunkan style ukuran fontnya ke elemen anak (elemen p).
Tetapi, di tiap elemen p diberi class dan style ukuran font masing-masing, sehingga ukuran font yang diturunkan dari elemen induk akan tertimpa (override).
..kecuali elemen p yang tidak beri class, sehingga masih mewarisi style ukuran font dari elemen body.
Elemen p class kelima, keenam, dan ketujuh akan berubah ukuran fontnya di web browser jika ukuran font pada selector body diubah.
Sampai sini selesai pembahasan kita kali ini tentang satuan nilai yang ada di CSS.
Dengan berakhirnya postingan ini, kita sudah selesai belajar dasar-dasar CSS. Supaya lebih enak dan fasih lagi, kami sarankan untuk banyak praktik.
Selanjutnya, cek juga pembahasan value untuk warna di postingan RGBA color ini.
