Tutorial CSS untuk Pemula: Satuan Nilai (Value) yang Ada di CSS

Halo gan. Di postingan sebelumnya, kita sudah membahas penurunan style CSS atau CSS inheritance, yang mana style pada elemen induk dapat diturunkan ke elemen anaknya, juga ke elemen cucunya.

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 css

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.
<p>Ini adalah sebuah paragraf dan ini akan dicetak <b>tebal</b></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.

satuan nilai css


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.

satuan nilai css

Terakhir, X-height (ex), ukuran ini jarang sekali digunakan. ane 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.

satuan nilai css

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.

Baca juga ya..

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:

satuan nilai css

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, ane sarankan untuk banyak praktik.

Next tutorial >> Tutorial CSS untuk Pemula: Satuan Nilai (Value) yang Ada di CSS



Tag : Tutorial CSS
0 Komentar untuk "Tutorial CSS untuk Pemula: Satuan Nilai (Value) yang Ada di CSS"