#4 Property: Font

Annyeong haseyo :) Mulai post ini kita akan belajar tentang selector, property dan value. Apa itu selector? Apa itu property? Apa itu value? Kalau belum tahu, kalian bisa baca di sini. Now off to the topic!

Selector ada banyak macamnya. Bagaimana cara menghapalnya? Gampang saja, cukup cocokkan selector dengan value yang cocok. Dan sering-seringlah berlatih menggunakan CSS. Saya punya CSS Cheat Sheet yang selalu saya bangga-banggakan kalau lagi bikin layout. Jadi, kalau kamu lupa, kamu bisa nengok ke cheatsheet itu :D Credit cheat sheet to its own, saya dapatnya dari multiply.com.

Jenis property dan value ada banyak, menurut CSS Cheat Sheet di atas ada 7 buah. Tapi saya akan meringkasnya supaya lebih mudah dimengerti, dan kita bakal pelajari satu-satu. Daripada langsung tujuh-tujuhnya, pasti bingung, kan?

GENERAL (property: value)

color: nama warna (boleh hex color, boleh nama langsung)

FONT (property: value)

font-style: italic, normal
font-variant: normal, small-caps
font-weight: bold, normal, lighter, bolder, integer (100-900)
font-size: size of the font (px or pt)
font-family: nama font


Misalnya kamu mau masukin kode seperti ini:

h1 {
font-style: italic;
font-weight: bold;
font-size: 16 pt;
font-family: "Century Gothic";
color: #fff000;
}

Ketika kamu memasukkan kode <h1>HALOOO!</h1> maka hasilnya akan seperti ini:


Sudah ngerti kan?

Mungkin kalian bertanya-tanya, apa sih bedanya px dengan pt pada ukuran font? Gampang aja. PX itu PIXEL, PT itu ukuran standar nulis. Kalau misalnya kalian nulis cerita di Microsoft Word terus nyetting ukuran angka jadi 18, misalnya, berarti itu 18 pt. Ukuran px lebih kecil daripada pt. Berdasarkan pengalaman saya waktu buat-buat layout dulu sih, 11 px = 8 pt. Lebih enak yang mana? Tergantung kalian. Saya pribadi lebih suka pakai yang pt, soalnya gampang (tinggal lihat Wordpad buat pedoman ukurannya) kalau px harus ngira-ngira sendiri. But still, itu semua terserah kalian. :)

Kalau hex color dan nama langsung? Oke. Kalian pasti tahu this kind of thing: #000000, #FF0000, #222222. Ya kan? Itulah kode nama bernama hex color. Keuntungan hex color ini, warnanya banyak dan pasti benar warnanya (maksudnya sesuai yang kita inginkan begitu). Kalau nama langsung seperti: black, white, violet, orchid. Keuntungan nama langsung ini, kita nggak perlu susah-susah menghapal 'ini berapa jumlah 0-nya?' atau 'ini F-nya diulang berapa kali?' dan sebagainya.

Happy coding!