CSS mempunyai satuan unit pengukuran tersendiri dalam menetapkan dimensi suatu elemen HTML. Suatu elemen tag HTML yang sudah diciptakan pasti akan memiliki dimensi lebar dan tinggi. Elemen tag HTML paragraf <p> jika sudah diciptakan akan memiliki dimensi seperti lebar elemen, tinggi elemen, besar huruf, margin, padding, sampai dengan spasi huruf yang ditetapkan melalui sistem satuan unit pengukuran.
Satuan unit pengukuran sangat berguna untuk menetapkan dimensi elemen yang baru sesuai ukuran baru yang dengan diinginkan. Setiap elemen HTML yang berhasil diciptakan pada dasarnya akan memiliki ukuran dan dimensi yang standar dan akan tampil di halaman walaupun tidak diberi ukuran sebelumnya. Namun untuk menata halaman HTML agar tersusun rapi dan terlihat lebih menarik, perlu dilakukan penataan ulang pada dimensi elemen HTML tersebut. Dan untuk menatanya harus menggunakan satuan ukuran yang menjadi standar pada CSS.
Contoh sederhana yang paling sering dijumpai misalnya besar huruf (font). Untuk menetapkan besar huruf (font-size) biasanya menggunakan satuan px (pixels). PX merupakan satuan pengukuran yang berdasarkan pada piksel layar. 1 px setara dengan 1/96 inches. Satuan PX bukan satu-satunya satuan untuk menetapkan ukuran pada CSS. Anda dapat menggunakan satuan pt (points), mm (millimeter), em dan lainnya.
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<title>Belajar Style Sheet Pada CSS</title>
</head>
<body>
<p style="font-size:10px;">Huruf ukuran 10px</p>
<p style="font-size:12px;">Huruf ukuran 12px</p>
<p style="font-size:14px;">Huruf ukuran 14px</p>
<p style="font-size:16px;">Huruf ukuran 16px</p>
<p style="font-size:18px;">Huruf ukuran 18px</p>
<p style="font-size:20px;">Huruf ukuran 20px</p>
</body>
</html>
Hasil Script :
Huruf ukuran 10px
Huruf ukuran 12px
Huruf ukuran 14px
Huruf ukuran 16px
Huruf ukuran 18px
Huruf ukuran 20px
Satuan absolute pada CSS merupakan satuan yang sudah mutlak dan nilainya tidak dapat berubah terhadap nilai satuan elemen yang lainnya. Jika ukuran yang dipakai menggunakan ukuran absolute, maka nilai akhirnya akan sesuai dengan nilai nyata (real) pada satuan ukuran standart nilai satuan tersebut.
Berikut tabel satuan absolute yang biasa digunakan pada CSS :
| No. | Satuan | Penjelasan |
|---|---|---|
| 1. | cm | centimeter |
| 2. | mm | millimeter |
| 3. | in | inches (1 in = 96 px = 2.54 cm) |
| 4. | px | pixels (1 px = 1/96 dari 1 inches) |
| 5. | pt | points (1 pt = 1/72 dari 1 inches) |
| 6. | pc | picas (1 pc = 12 pt) |
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<title>Belajar Style Sheet Pada CSS</title>
</head>
<body>
<p style="font-size:10px;">Huruf ukuran 10px</p>
<p style="font-size:12px;">Huruf ukuran 12px</p>
<p style="font-size:14px;">Huruf ukuran 14px</p>
<p style="font-size:16px;">Huruf ukuran 16px</p>
<p style="font-size:18px;">Huruf ukuran 18px</p>
<p style="font-size:20px;">Huruf ukuran 20px</p>
</body>
</html>
Hasil Script :
20 mm
2 cm
2 in
220 px
220 pt
20 pc
Satuan relative merupakan nilai satuan yang bersifat diwariskan oleh elemen induk kepada elemen anak di dalamnya. Nilai aktual satuan relative suatu elemen HTML sangat bergantung pada elemen lain yang merupakan elemen induknya. Nilai satuan relative akan selalu berubah sesuatu besaran nilai elemen lainnya.
Berikut tabel satuan relative yang sering digunakan pada CSS :
| No. | Satuan | Penjelasan |
|---|---|---|
| 1. | em | relative pada font-size untuk elemen (font-size 2em artinya nilainya 2 kali dari elemen induk) |
| 2. | ex | relative pada tinggi huruf x font yang aktif |
| 3. | rem | relative pada font-size pada elemen root |
| 4. | vw | relative 1% pada lebar tampilan layar |
| 5. | vh | relative 1% pada tinggi tampilan layar |
| 6. | % | relative sebesar 1/100 dari elemen induk |
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<title>Belajar Style Sheet Pada CSS</title>
</head>
<body>
<div style="font-size: 16px">Div ukuran standar 16px
<p style="font-size: 2em">P ke-1 ukuran font 2em (2 x 16px)</p>
<p style="font-size: 2ex">P ke-2 ukuran font 2ex</p>
<p style="font-size: 150%">P ke-3 ukuran font 150% (150/100 dari 16px)</p>
<p style="font-size: 2vw">P ke-4 ukuran font 2vw (2% ukuran lebar layar)</p>
<p style="font-size: 2vh">P ke-5 ukuran font 2vh (2% ukuran tinggi layar)</p>
</div>
</body>
</html>
Hasil Script :
P ke-1 ukuran font 2em (2 x 16px)
P ke-2 ukuran font 2ex
P ke-3 ukuran font 150% (150/100 dari 16px)
P ke-4 ukuran font 2vw (2% ukuran lebar layar)
P ke-5 ukuran font 2vh (2% ukuran tinggi layar)
Pada satuan relative terhadap layar seperti satuan vw (viewport-width) dan vh(viewport-height), perbedaan nilai aktual satuan dapat dilihat pada saat halaman windows browser diresize atau diperkecil dan diperbesar. Perbedaan juga bisa dilihat saat halaman diakses melalui komputer pc atau laptop dengan lebar screen yang berbeda, dan juga saat diakses dengan smartphone yang memiliki layar yang relative kecil.
Tutorial CSS
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
Previous Page
