Belajar CSS 5: CSS Font, Memanipulasi Huruf di CSS
Sesi belajar css kali ini membahas tentang css font yang merupakan salah satu dari css style. CSS font digunakan untuk mengatur tampilan font atau huruf pada website.CSS Font Family
Didalam CSS terdapat 2 tipe nama CSS font family, yaitu :- Generik family : Kelompok font family dengan tampilan yang sama (seperti “serif” atau “monoscope”)
- Font family : Font family khusus / tertentu ( seperti “times new roman” atau ‘arial”)
Font family merupakan pengaturan jenis huruf yang akan digunakan, Contoh pemakaian :
1
| p{ font-family : "Times New Roman" , Times, serif ;} |
CSS Font Style
Style disini yang paling banyak digunakan adalah cetak miring, yang sebenarnya juga terdapat style normal dan oblique. Berikut syntak CSS font style:
1
2
3
4
5
| p. normal { font-style : normal ;} p. italic { font-style : italic ;} p. oblique { font-style : oblique ;} |
CSS Font Size
Didalam mendesain web, mengatur ukuran font itu penting. Dengan menggunakan property ini, memudahkan kita untuk mengatur ukuran font berbeda-beda dalam satu halaman website. Disini kita akan belajar juga cara mengatur ukuran font dalam css. Jangan lupa untuk Selalu gunakan tag HTML yang tepat, seperti <h1> – <h6> untuk heading dan paragraf <p>. Nilai font-size bisa menjadi ukuran absolut, atau relatif.
1
2
3
4
5
| body { font-size : 13px ; } // satuan pixel body { font-size : 1.5em ; } // satuan em body { font-size : 100% ; } // satuan % |
1
2
3
4
5
| h 1 { font-size : 2.5em ;} /* 40px/16=2.5em */ h 2 { font-size : 1.875em ;} /* 30px/16=1.875em */ p { font-size : 0.875em ;} /* 14px/16=0.875em */ |
CSS Font Variant
Contoh Font Variant adalah membuat font besar semua, dimana pada css text terdapat text transformation. Contoh syntak CSS Font Variant:
1
2
3
| p. normal { font-variant : normal ; } // tulisan normal p.besar { font-variant : small-caps ; } // TULISAN BESAR SEMUA |
CSS Font Weight
Penggunaan yang sering ditemukan pada style font weight, yakni membuat huruf tebal. Berikut syntak untuk CSS font weight:
1
2
3
| p. normal { font-weight : normal ;} // font normal p.tebal{ font-weight : bold ; } // hasil tebal |
Okey, tutorial belajar css tentang CSS font sudah cukup. Saya yakin anda akan semakin jelas dalam mempelajari css dan ketagihan belajar css
0 komentar:
Posting Komentar