Mungkin dari kita pernah belajar tentang Satuan Internasional. Dalam CSS juga terdapat satuan-satuan. Satuan dalam CSS digunakan untuk menentukan panjang, lebar, ukuran font dan banyak lagi.

Pixel

Pixel diukur menurut jumlah titik-titik dalam monitor. Contoh:

<style>
.kotak {
    background-color: red;
    width: 200px;
    height: 100px;
}
</style>
<div class="kotak"></div>

Menjadi:

Persen

Persen diukur menurut persentase terhadap elemen induk (parent). Contoh:

<style>
.kotak {
    background-color: red;
    width: 50%;
    height: 50%;
}
</style>
<div class="kotak"></div>

Menjadi:

Satuan Viewport

Viewport merupakan area yang terlihat pada web browser. Ada beberapa satuan yang relatif terhadap viewport yaitu:

• vw, persentase terhadap lebar (width) viewport
• vh, persentase terhadap tinggi (height) viewport
• vmin, persentase terhadap nilai yang terkceil antara lebar dan tinggi viewport
• vmax, persentase terhadap nilai yang terbesar antara lebar dan tinggi viewport

Contoh:

<style>
.kotak {
    background-color: red;
    width: 50vw;
    height: 75vh;
}
</style>
<div class="kotak"></div>

Menjadi:

Satuan Dunia Nyata

Satuan-satuan berikut merupakan satuan yang terdapat dalam dunia nyata dan terdapat dalam CSS:

• cm, sama dengan 37.8px
• mm, sama dengan 0.1cm
• in, sama dengan 96px
• pt, sebuah titik (1 in = 72 pt)
• pc, sebiah pica (1 pc = 12 pt)

Contoh:

<style>
.kotak {
    background-color: red;
    width: 5cm;
    height: 20mm;
}
</style>
<div class="kotak"></div>

Menjadi:

Satuan Relatif

Satuan-satuan berkikut relatif terhadapt besar font:

• em, relatif terhadap ukuran huruf m pada elemen
• rem, relatif terhadap ukuran huruf m pada elemen html
• ex, relatif terhadap ukuran huruf x pada elemen
• ch, relatif terhadap ukuran huruf 0 pada elemen

Contoh:

<style>
.kotak {
    background-color: red;
    width: 5rem;
    height: 4em;
}
</style>
<div class="kotak"></div>

Menjadi:

Kesimpulan

Sekian tutorial kali ini. Cari tuturial lain di DaunKoder ya!. Jangan lupa bagikan tutorial ini ke temen kamu yang lagi belajar CSS. Terima kasih.