Kali ini kita akan membahas mengenai satuan ukuran pada CSS yang sering digunakan. Sebelumnya kita telah membahas mengenai cara menghubungkan CSS ke HTML. Satuan ukuran CSS sangat diperlukan untuk mendesain tata letak bagian – bagian sebuah website.
CSS mendukung banyak ukuran termasuk satuan mutlak seperti inches, Centimeters, Points, dan lain – lain. Selain itu, terdapat ukuran relatif seperti persen dan satuan em. Anda membutuhkan angka tersebut untuk mendefinisikan pada aturan CSS. Misalnya : border=”2px solid blue”.
|
Satuan |
Deskripsi |
Contoh |
| px | Ukuran piksel pada layar | p {margin-bottom: 12px;} |
| pt | Ukuran dalam titik (point). Sebuah titik didefinisikan sebagai 1/72 inchi. | body {font-size: 14pt;} |
| pc | Ukuran dalam picas. Satu pica sama dengan 12 titik. Maka ada 6 picas per inch. | p {font-size: 20pc;} |
| mm | Ukuran dalam millimeter. | p {word-spacing: 10mm;} |
| cm | Ukuran dalam centimeter. | p {margin-top: 3cm;} |
| in | Ukuran dalam inchi. | p {word-spacing: .2in;} |
| % | Ukuran relatif dalam persentase terhadap nilai lain. | p {font-size: 12pt; line-height: 150%;} |
| em | Ukuran relatif untuk tinggi dari sebuah font dalam em space. Satuan em sama dengan ukuran font yang diberikan. Jika kita menetapkan ukuran font menjadi 12pt, maka setiap satuan “em” akan menjadi 12pt. Maka 1.5em menjadi 18pt dan 2em menjadi 24pt. | .test {font-size: 1.2em;} |
| ex | Ukuran relatif dari tinggi font x. x-height (tinggi font x) sama dengan tinggi dari font x dalam keadaan lowercase. (huruf kecil). Maka 2ex menjadi 2 kali tinggi huruf x. | p {font-size: 24pt; line-height:2ex;} |
Demikian tutorial belajar CSS mengenai satuan ukuran CSS untuk desain tatak letak website. Selanjutnya kita akan membahas mengenai penggunaan warna pada CSS. Semoga bermanfaat dan terima kasih.