Satuan dalam CSS digunakan untuk menentukan ukuran dari suatu elemen atau kontennya. Misal, jika ingin menentukan margin dari sebuah paragraf, dapat diberikan nilai tertentu. Nilai ini akan diikuti oleh satuan (CSS unit).
Contoh satuan dalam css margin: 20px; margin adalah properti yang ingin diatur ukurannya, 20px adalah nilainya, dan px (atau pixel) adalah satuannya (CSS unit).
Terdapat dua katagori satuan dalam CSS, Absolute unit dan Relative unit
A. Absolute unit
Unit yang “absolute” akan selalu memiliki ukuran yang sama apapun elemen parent-nya atau ukuran layar. Artinya properti yang diatur dengan absolute unit akan memiliki ukuran sama baik di telepon maupun di layar monitor yang besar.
Absolute unit berguna jika project yang dikerjakan tidak memikirkan keresponsifan. Misalnya, aplikasi desktop yang tidak bisa di-resized bisa menggunakannya. Jika ukuran jendela tidak akan berubah, maka kontennya pun tidak juga.
Pixel (px) sering dipakai untuk menentukan absolute unit di layar. Centimeter, millimeter, dan inchi lebih sering dipakai untuk dokumen cetak (kamu mungkin tidak tgerpikirkan kalau tiga opsi ini bisa dipakai).
| Unit | Keterangan |
|---|---|
| cm | sentimeter |
| mm | millimeters |
| in | inci (1in = 96px = 2.54cm) |
| px * | piksel (1px = 1/96 dari 1 dalam) |
| pt | poin (1pt = 1/72 dari 1 dalam) |
| pc | picas (1pc = 12 pt) |
B. Relative unit
Relative unit berguna untuk mendesain website yang responsif karena ukurannya bisa berubah relatif terhadap parent atau ukuran layar.
Secara umum relative unit bisa dipakai sebagai satuan bawaan website responsif sehingga bisa membantu untuk meng-update style di ukuran layar yang berbeda.
Relative unit mungkin akan sedikit lebih sulit dibandingkan absolute unit untuk menentukan satuan mana yang akan dipakai.
| Unit | Keterangan |
|---|---|
| em | Relatif terhadap ukuran font elemen (2em berarti 2 kali ukuran font saat ini) |
| ex | Relatif terhadap tinggi x font saat ini (jarang digunakan) |
| ch | Relatif dengan lebar “0” (nol) |
| rem | Relatif terhadap ukuran font elemen root |
| vw | Relatif dengan 1% dari lebar viewport * |
| vh | Relatif terhadap 1% dari ketinggian viewport * |
| vmin | Relatif terhadap 1% dari dimensi viewport * yang lebih kecil |
| vmax | Relatif terhadap 1% dari dimensi viewport * yang lebih besar |
| % | Relatif terhadap elemen induk |
C. Contoh pemakaian Satuan dalam CSS
Satuan %
suatu child element memiliki 10% lebar parent sebagai marginnya sehingga tidak akan mengisi keseluruhan parent. Ketika ukuran parent berubah, maka margin juga akan berubah.
.child {
margin: 30%;
}Satuan em
font child element memiliki setengah ukuran parent-nya (contoh: ukuran paragraf setelah judul)
.child {
font-size: 0.5em;
}Satuan rem
agar ukuran font 2 kali lebih besar dari ukuran font root element (ukuran font yang diatur untuk body, biasanya 16px)
.header {
font-size: 2rem;
}Satuan ch
Kamu menggunakan mono-spaced font (font yang semua karakternya memiliki ukuran lebar yang sama) dan hanya menyediakan ruang untuk 10 karakter saja.
.small-text {
width: 10ch;
}
Satuan vh
Kamu ingin agar landing page memiliki bagian yang ukurannya setinggi browser.
.wrapper {
height: 100vh;
}Satuan vw
Kamu ingin ada bagian teks yang ukurannya setengah layar browser untuk komponen hero.
.half-size {
width: 50vw;
}Satuan vmin
Kamu ingin sebuah gambar selalu mengambil ukuran lebih kecil dari suatu viewport. Misalnya sata telepon dalam mode portrait maka gambar tersebut akan selebar layar.
.min-width {
width: 100vmin;
}Satuan vmax
Kamu ingin menampilkan gambar pola di latar belakang.
.max-width {
width: 100vmax;
}Satuan ex
Kamu mungkin jarang menemukan kebutuhan untuk menggunakan ex. Pada contoh ini kamu ingin agar tinggi antar baris kalimat dipisahkan oleh jarak 2 x.
.double-x {
line-height: 2ex;
}D. Contoh Penerapan Satuan CSS
<!DOCTYPE HTML>
<html>
<head>
<title>www.syaiflash.com - Satuan CSS</title>
<style type="text/css">
header {
width: 600px;
background-color: darkviolet;
color: white;
padding: 16px;
margin-bottom: 16px;
}
article {
width: 600px;
background-color: honeydew;
padding: 16px;
}
</style>
</head>
<body>
<header>
<h1>Bagian ini mengambil CSS dari header</h1>
</header>
<article>
<p>Bagian ini mengambil CSS dari article</p>
</article>
</body>
</html>- Demo Satuan CSS
- Download Satuan CSS
Leave a Reply