cloud-hosting-terbaik-indonesia

Tutorial Belajar CSS Part 11: Mengenal Satuan Nilai (Value) dalam CSS

Posted on

Pada mendesain halaman web, kadang ada saatnya kita membutuhkan fleksibilitas pada menentukan nilai atau value tertentu bagi suatu properti, seperti tinggi sebuah box, besar ukuran font maupun besar border dari tabel. Bagi kebutuhan ini, CSS menyediakan bermacam ukuran seperti pixel, em, point, in, komputer, dan pt.

Pada panduan belajar CSS Mengenal Satuan Nilai (Value) dalam CSS ini kita akan membahas pengertian dan perbedaan masing-masing nilai tersebut.

Sebuah nilai pada CSS dapat bernilai positif maupun negatif, dapat berupa angka bulat, maupun angka desimal. Namun beberapa properti pun mempunyai batasan, seperti warna yang hanya dapat bernilai 0-255 atau 0 hingga dengan FF.


Nilai Absolut

Nilai absolut yakni sebuah nilai di pada CSS, dimana nilai tersebut tak dipengaruhi kondisi tag induknya (parent), dan didasarkan di ukuran hakekatnya di media printing. Di pada CSS, nilai absolut ini yakni: milimeter (mm), centimeter (cm), inchi (in), point (pt), dan pica (komputer).

Kelima nilai absolut ini berasal dari media percetakan. Kita pastinya telah familiar dengan ukuran seperti milimeter, dan centimeter. Sedangkan 1 inchi yakni sekitar 25,4 mm.

Ukuran point (pt) sering digunakan pada media cetak offline seperti Microsoft word pada menentukan ukuran dari font. 1 inchi setara dengan 72pt, sehingga ukuran font normal sebesar 12pt setara dengan seperdelapan inchi. Contoh penggunaannya pada CSS: p {font-size: 18pt;} sama dengan p {fontsize: 0.25in;}.

Ukuran pica (komputer) mungkin tak terlalu familiar. 1pc setara dengan 12pt. contoh penulisannya pada CSS yakni p {font-size: 1.5pc;}.

Kelima nilai absolut tersebut, selain pt tak terlalu sering digunakan, karena konversi dari ukuran dunia nyata ke pada monitor dipengaruhi banyak hal, 1cm di satu monitor dapat jadi berbeda dengan 1cm di monitor lainnya, sehinga agak menyulitkan pada mendesain kode CSS yang “pas”.


Nilai Relatif

Berbeda dengan nilai absolut, nilai relatif didalam CSS dipengaruhi oleh tag disekitarnya. CSS mendukung banyak nilai relatif, beberapa yang kita bahas yakni: pixel (px), Em-height (em), dan X-height (ex).

Ukuran pixel (px), adalah ukuran yang sangat sering digunakan pada CSS. Di pada CSS, pixel termasuk nilai relatif karena ia tak terikat dengan perbandingan media tertentu. Didalam spesifikasi CSS2. 1, 1 pixel disamakan dengan 0.26mm atau 1/96 inci, namun banyak browser yang menyampingkan spesifikasi ini dan menyamakan 1 pixel dengan 1 pixel sesungguhnya yang terdapat di monitor.

1 unit Em-height (em) sama dengan besar ukuran asal yang diturunkan tag tersebut. Ketika kita mendefenisikan sebuah paragraf sebesar 12pt, karenanya sebuah tag <em> yang berada di pada paragraf tersebut disebut secara inheritance akan berukuran 1em. Sekiranya kita merubahnya menjadi em {font-size: 1.2em;} karenanya tag <em> tersebut akan berukuran 1,2 kali lebih besar dari ukuran tag p.

Ukuran relatif terakhir yaitu X-height (ex). ex berasal dari tinggi sebuah karakter “x” (huruf x kecil) dari sebuah font. Namun, banyak font yang tak mendukung hal ini, sehingga browser kadang kala menyamakan 1ex dengan 0,5em.


Nilai Persentasi

Nilai persentasi yakni sebuah nilai per seratus (%) dari suatu property yang relatif kepada induk (parent) dari tag tersebut. Misalkan kita membangun sebuah defenisi CSS selaku p {font-size: 10pt;}, dan em {font-size: 120%;}. Karenanya bila terdapat tag <em> didalam tag <p>, karenanya ukuran font dari tag <em> akan menjadi 120% dari 10pt, atau sekitar 12pt.

Dengan membangun nilai font lainnya menjadi persen, hal ini akan mempermudah bila suatu ketika kita ingin merubah seluruh tampilan web. Hanya merubah ukuran tag <p>, karenanya secara seketika tag <em> akan menyesuaikan tampilannya.

Berikut yakni contoh perbandingan_fontsize.html, dimana saya menampilkan ukuran property font-size dengn bermacam value:

Sekiranya diperhatikan lagi, saya membangun sebuah selector body {font-size:14pt;} di bagian awal definisi CSS. Selector body akan menurunkan (inherit) ukuran font ini ke seluruh tag <p> yang berada di pada tag <body>, namun di masing-masing tag <p>, saya menambahkan property HTML “class”, sehingga ukuran font akan ditimpa (override) oleh nilai lainnya.

Khusus bagi class=lima, class=enam, dan class=tujuh, saya menggunakan nilai relatif em, ex, dan %, sehingga nilainya bergantung dengan nilai induknya (parent), yakni body {font-size:14pt;}. Cobalah mengubah ukuran font-size di body ini, lalu jalankan kembali perbandingan_fontsize.html, karenanya secara otomatis ketiga kalimat tersebut pun akan berubah ukurannya.


eBook CSS Uncover Duniailkom

Sekiranya sahabat ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih komplit, mulai dari mendasar hingga fitur terbaru CSS3 seperti animasi dan web memiliki tampilan yang dinamis. Penjelasan lebih lanjut dapat ke: eBook CSS Uncover Duniailkom.


Sumber https://www.duniailkom.com/