Mengenal Satuan Nilai (Value) dalam CSS

belajar HTML dan CSS untuk pemula

Dalam merancang halaman web, kadang ada waktunya kita memerlukan fleksibilitas dalam menentukan nilai atau value tertentu untuk suatu properti, seperti tinggi sebuah box, besar ukuran font ataupun besar border dari tabel. Untuk kebutuhan ini, CSS menyajikan berbagai ukuran seperti pixel, em, point, in, pc, dan pt.

Dalam tutorial belajar CSS Mengenal Satuan Nilai (Value) dalam CSS ini kita akan mengulas pengertian dan perbedaan setiap nilai itu.

Sebuah nilai dalam CSS bisa bernilai positif ataupun negatif, dapat berupa angka bulat, ataupun angka desimal. Tetapi beberapa properti juga mempunyai batasan, seperti warna yang cuma bisa bernilai 0-255 atau 0 hingga FF.

Nilai Absolut

Nilai absolut ialah sebuah nilai di dalam CSS, dimana nilai itu tidak dipengaruhi keadaan tag induknya (parent), dan berdasarkan pada ukuran sebetulnya di media printing. Di dalam CSS, nilai absolut ini merupakan: milimeter (mm), centimeter (cm), inchi (in), point (pt), dan pica (pc).

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

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

Ukuran pica (pc) mungkin tak terlalu familiar. 1pc sama dengan 12pt. contoh penulisannya dalam CSS ialah p {font-size: 1.5pc;}.

Kelima nilai absolut itu, selain pt tak terlalu biasa dipakai, sebab konversi dari ukuran dunia nyata ke dalam monitor dipengaruhi banyak hal, 1cm di satu monitor boleh jadi beda dengan 1cm pada monitor lainnya, sehinga agak menyusahkan dalam merancang kode CSS yang “pas”.

Nilai Relatif

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

Ukuran pixel (px), merupakan ukuran yang amat biasa dipakai dalam CSS. Di dalam CSS, pixel termasuk nilai relatif sebab dia tidak terikat dengan perbandingan media tertentu. Didalam spesifikasi CSS2. 1, 1 pixel disamakan dengan 0.26mm atau 1/96 inci, tetapi banyak browser yang mengabaikan spesifikasi ini dan menyamakan 1 pixel dengan 1 pixel sebenarnya yang ada di monitor.

1 unit Em-height (em) sama dengan besar ukuran asal yang diturunkan tag itu. Saat kita mendefenisikan sebuah paragraf sebesar 12pt, maka sebuah tag <em> yang ada di dalam paragraf itu disebut secara inheritance akan berukuran 1em. Bila kita merubahnya jadi em {font-size: 1.2em;} maka tag <em> itu akan berukuran 1,2 kali lebih besar dari ukuran tag p.

Ukuran relatif terakhir yaitu X-height (ex). ex asalnya dari tinggi sebuah karakter “x” (huruf x kecil) dari sebuah font. Tetapi, banyak font yang tidak mendukung hal ini, sehingga browser sering kali menyamakan 1ex dengan 0,5em.

Nilai Persentasi

Nilai persentasi ialah sebuah nilai per seratus (%) dari suatu property yang relatif terhadap induk (parent) dari tag itu. Misalnya kita membuat sebuah defenisi CSS sebagai p {font-size: 10pt;}, dan em {font-size: 120%;}. Maka bila terdapat tag <em> didalam tag <p>, maka ukuran font dari tag <em> akan jadi 120% dari 10pt, atau sekitar 12pt.

Dengan membikin nilai font lainnya jadi persen, hal ini akan mempermudah bila suatu waktu kita mau mengubah seluruh tampilan web. Cuma mengubah ukuran tag <p>, maka secara langsung tag <em> akan menyesuaikan tampilannya.

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

<!DOCTYPE html>
<html>
<head>
   <title>Contoh Perbandingan Ukuran dari font-size</title>
   <style type="text/css">
            body    { font-size:14pt; }
            p.satu  { font-size:8mm; }
            p.dua   { font-size:0.35in; }
            p.tiga  { font-size:2.2pc; }           
            p.empat { font-size:20px; }
            p.lima  { font-size:1.8em }
            p.enam  { font-size:3ex; }
            p.tujuh { font-size:190%; }
    </style>
</head>

<body>
       <p>Kalimat ini akan berukuran 14 point</p>
       <p class="satu">Kalimat ini akan berukuran 8 milimeter</p>
       <p class="dua">Kalimat ini akan berukuran 0,35 inchi</p>
       <p class="tiga">Kalimat ini akan berukuran 2,2 pica</p>
       <p class="empat">Kalimat ini akan berukuran 20 pixel</p>
       <p class="lima">Kalimat ini akan berukuran 1,8 em</p>
       <p class="enam">Kalimat ini akan berukuran 3 ex</p>
       <p class="tujuh">Kalimat ini akan berukuran 190%</p>
</body>
</html>

Bila diperhatikan lagi, saya membuat sebuah selector body {font-size:14pt;} di bagian awal pengertian CSS. Selector body akan menurunkan (inherit) ukuran font ini ke segala tag <p> yang ada di dalam tag <body>, tetapi pada masing-masing tag <p>, saya menambahkan property HTML “class”, sehingga ukuran font akan ditimpa (override) oleh nilai lainnya.

Khusus untuk class=lima, class=enam, dan class=tujuh, saya memakai nilai relatif em, ex, dan %, sehingga nilainya tergantung dengan nilai induknya (parent), yaitu body {font-size:14pt;}. Cobalah merubah ukuran font-size pada body ini, lalu jalankan kembali perbandingan_fontsize.html, maka dengan otomatis ketiga kalimat itu juga akan berganti ukurannya.


Butuh Web Developer Makassar atau Jasa SEO di Makassar yang bergaransi? Jangan ragu dengan infanthree.com. Kami juga penyedia Jasa Pembuatan Aplikasi Android di Makassar yang terkemuka. Selain itu ada layanan SEM, SMM, Internet Marketing Agency Makassar dan Social Media, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik, hingga pelatihan komputer dan internet marketing.

Recommended Posts

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

WhatsApp chat