css: font styling CSS memberi gaya pada font/huruf. Dengan css style, huruf atau font diformat ke dalam berbagai bentuk, warna, ukuran dan lain-lain, seperti yang akan diuraikan bagaimana memformat font dengan css, yang meliputi:
- font-family.
- color
- font-size
- font-style
- font-variant
- font-weight
Jenis huruf.
Dalam memilih bentuk font css, ada dua jenis nama keluarga font:- keluarga generik: kelompok keluarga font dengan tampilan yang sama (seperti : "serif" atau "monospace")
- fon: keluarga font tertentu (seperti: "times new roman" atau "arial")
| keluarga generik | font family | penjelasan |
|---|---|---|
| serif | times new roman georgia |
serif font memiliki garis kecil di ujung pada beberapa karakter. |
| sans-serif | arial verdana |
"sans" berarti tidak : font ini tidak memiliki garis diujung karakter |
| monospace | courier new lucida console |
semua karakter monospace memiliki lebar yang sama |
Untuk memilih keluarga font dalam memformat font/teks digunakan properti Font-family. Properti font-family harus diikuti dengan beberapa nama font sebagai sistem "fallback". Jika browser tidak mendukung font pertama, ia akan memilih font berikutnya yang didukung.
Mulailah dengan nama font yang anda inginkan, dan diakhiri dengan keluarga generik agar browser memilih font yang sama dalam keluarga generik jika tidak ada font lain yang tersedia.
Jika nama font yang dipilih lebih dari satu kata maka dalam menulis nama font harus berada dalam tanda kutif, Seperti "Times New Roman". Dan jika memilih lebih dari satu nama harus dipisahkan dengan tanda koma.
p { font-family: "Trebuchet MS", Arial; }
Warna huruf.
Untuk menentukan warna huruf digunakan properti color dengan nilai/value yang dapat dipilih dengan: nama warna, kode hexadecimal, atau nilai rgb.Contoh.
h1 { color: #0000FF; }
Ukuran huruf.
Untuk menentukan ukuran huruf digunakan properti font-size. Sedangkan nilai/value dari properti tersebut adalah: small, medium, large, px; % dan lainnya.Contoh
h1 { font-size: larger; }
p { font-size: medium; }
Tampilan pada halaman web.
Judul ukuran larger
paragraf ini berukuran 12px
sedangkan paragraf ini berukuran medium
Gaya huruf/style.
Untuk menentukan gaya/style huruf digunakan properti: font-style, dengan memilih nilai: normal, italic, oblique.Contoh.
Tampilan pada halaman web.
tulisan pada paragraf ini bergaya miring (italic).
sedangkan tulisan ini bergaris bawah.
Font variant.
Properti font-variant digunakan untuk mengatur teks agar bergaya small caps atau tidak. Atribut ini dengan memilih value: small-caps maka teks yang tadinya berhuruf kecil berubah menjadi huruf capital semua.Contoh
p { font-variant: small-caps; }
Tampilan pada halaman web.
paragraf ini bergaya small-caps, asalnya semua berhuruf kecil.
Huruf tebal.
Untuk membuat huruf tebal, digunakan properti font-weight dengan nilai/value yaitu: normal, bold, bolder atau lighter.Contoh.
p { font-weight: lighter; }
Tampilan pada halaman web.
ini heading
teks pada paragraf ini bergaya lighter.
Itulah, bagaimana css mengatur variasi gaya pada huruf atau teks.
Sumber materi: W3Schools.
Baca juga:
- Belajar html Background Styling.
- Cara Membuat Gambar Transparan.
- Cara Mengubah Grid Menu Pada Symbian S60v3v5.
- Belajar HTML Cara Membuat Teks/Obyek Berjalan.
- Belajar html Hyperlink.
