Oke pada artikel kali ini kita akan membahas seputar Styling FONT di dalam CSS, topik yang akan kita pelajari kali ini, antara lain.
- Mengganti Jenis Font Dalam CSS
- Mengenal Font Style Dalam CSS
- Mengatur Ukuran Font Dalam CSS
- Mengatur Ketebalan Huruf Dalam CSS
- Mengenal Property Font Variant Dalam CSS
Sebelum kita masuk kedalam pembahasan utama kita akan mengenali terlebih dahulu Jenis - Jenis Font Standar Dalam CSS. Jika sudah mengenal silahkan di baca tutorialnya dibawah ini.
1. Mengganti Jenis Font Dalam CSS
Untuk mengganti atau mengubah jenis font yang digunakan di dalam HTML itu kita bisa menggunakan property CSS : font-family. berikut ini adalah contoh penggunaannya.
body {
font-family: Arial;
}
p {
font-family: Courier;
}
2. Mengenal Font Style Dalam CSS
Maksud dari Font Style disini adalah untuk membuat tulisan menjadi miring (italic) dan tulisan condong, condong disini bukan seperti italic. Nahh untuk Property yang digunakan adalah property CSS : font-style, sedangkan untuk value "nilai" dari property tersebut ada 3 macam, yaitu :
- normal : Membuat tulisan menjadi normal
- italic : Membuat tulisan menjadi miring
- oblique : Membuat tulisan menjadi condong, condong disini berbeda dengan miring.
Supaya lebih mengerti silahkan perhatikan contoh penggunaan Property CSS : font-style ini di dalam HTML.
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<p class="normal">Saya Sedang Belajar CSS Di Blog Pintasku.</p>
<p class="italic">Saya Sedang Belajar CSS Di Blog Pintasku.</p>
<p class="oblique">Saya Sedang Belajar CSS Di Blog Pintasku.</p>
</body>
</html>
3. Mengatur Ukuran Font Dalam CSS (Font-size)
Nahh sedangkan untuk Mengatur ukuran font dalam CSS itu menggunakan Property CSS : font-size. berikut adalah contoh kode CSSnya.
Di dalam CSS satuan untuk mengatur ukuran text itu ada 3 macam, yaitu :
p {
font-size: 14px;
}
Pada contoh kode di atas terlihat bahwa saya menggunakan value "14px".Di dalam CSS satuan untuk mengatur ukuran text itu ada 3 macam, yaitu :
- Menggunakan satuan pixel
Penggunaan satuan pixel ini memang sangatlah sering digunakan karena satuan pixel ini lebih spesifik dalam hal menampilkan jika kita menerapkan satuan pixel maka jika dibuka hasilnya akan 14px
- Menggunakan satuan em
Penggunaan satuan em ini sangat disarankan oleh para web desainer dari pada menggunakan satuan pixel, ukuran 1 em itu sama dengan ukuran 16px di dalam pixel dan 100% jika di dalam satuan persen.
- Menggunakan satuan persen
Satuan persen merupakan satuan yang bersifat relatif, karena perhitungan satuan persen itu berdasarkan ukuran font dari settingan tag induk (parent element).
4. Mengatur Ketebalan Huruf Dalam CSS
Jika di dalam HTML kita mengetahui untuk mengatur ketebalan sebuah huruf, itu menggunakan tag <b> dan <strong> nahh jika di dalam CSS kita menggunakan property font-weight. Berikut ini adalah contoh penggunaan property font-weight di dalam CSS.
p {font-weight: normal;} // font normal
h1 {font-weight: bold; } // hasil tebal
5. Mengenal Property Font Variant Dalam CSS
Property Font-variant ini memiliki fungsi sama halnya dengan property text-transform, yaitu untuk membuat huruf menjadi besar semuanya atau lebih sederhananya mengubah tulisan menjadi tulisan kapital. Jika pada property text-transform itu bisa diisi dengan 4 nilai: uppercase, lowercase, capitalize dan none. Sedangkan di property font-variant hanya bisa diisi dengan 2 nilai saja, yaitu : small-caps dan normal.
Nilai small-caps pada property font-variant ini akan memberikan kesan ‘old-school’ pada tulisan, karena nilai ini membuat tulisan menjadi sedikit lebih kecil, tapi dengan huruf besar semua.
Berikut ini adalah contoh penggunaan property font-variant dalam CSS.
p {font-weight: normal;} // tulisan normal
h2 {font-variant: small-caps; } // TULISAN TEBAL
Nahh cukup sekian Tutorial Belajar CSS mengenai Styling Font, semoga tutorial ini bisa bermanfaat untuk semuanya. Terimakasih
No comments:
Post a Comment