Tutorial kali ini adalah mengatur font atau huruf di website dengan menggunakan CSS.
Ada beberapa property yang harus kamu pahami untuk mengatur font, yaitu:
fontmengatur semua property font dalam satu barisfont-familymengganti jenis huruf seperti: Arial, Times New Roman, dllfont-sizemengatur ukuran huruf (besar / kecil)font-stylemengatur style huruf (tebal, miring)colormengganti warna huruffont-weightmengatur ketebalan huruf (tebal, normal, tipis)
Cara Mengatur Style Huruf dengan CSS
Saya akan mencoba mengaplikasikan semua style yang ada di atas.
File html dengan nama belajar.html
<!DOCTYPE html> <html> <head> <title>Belajar Paragraf HTML</title> </head> <body> <h1>Contoh Style 1 Baris</h1> <p>Contoh style banyak baris ada disini. Jadi nanti coba kita lihat efeknya ya</p> </body> </html>
File belajar_style.css
h1 {font: 30px arial, sans-serif;}
p {
font-family: Georgia, serif;
font-weight: bold;
color: blue;
font-style: italic;
font-size: 20px;
}
Hasilnya:
Note saran saya lebih baik jangan satu baris, tapi buat property untuk setiap perubahan.
Supaya, nanti ketika ingin mengubahnya lagi mendefinisikannya menjadi lebih mudah.
Value Property Font-Family
Font-family memiliki syntax css berikut:
font-family: family-name|generic-family|initial|inherit;
Ada 2 jenis nama font-family yaitu:
- Family-name, atau nama fontnya itu sendiri. Seperti Arial, Times New Roman, Calibri, dll.
- Generic-family, atau nama dari jenis-jenis font seperti Serif, San Serif, Monospace
Kita harus mendeklarasikan kedua nama font-family diatas. Fungsiny aadalah jika family-name tidak ditemukan oleh browser (baik di server atau komputer lokal) maka browser akan mencari font dengan jenis generic-family yang sama.
Misal, kita menggunakan font helvetica, ketika font tersebut tidak ditemukan maka akan mencari font sejenis sans-serif lain seperti Arial.
Contoh penulisan font-family yang lain:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Jenis Font HTML</title>
<link rel="stylesheet" type="text/css" href="belajar_style.css">
</head>
<body>
<h1>h1 {font-family:Georgia;}</h1>
<h2>h2 {font-family:Palatino Linotype;}</h2>
<h3>h3 {font-family:Arial;}</h3>
<h4>h4 {font-family:Arial Black;}</h4>
<h5>h5 {font-family:Impact;}</h5>
<h6>h6 {font-family:Courier New;}</h6>
<p>p {font-family:initial;}</p>
</body>
</html>
Kode CSS:
h1 {font-family:Georgia;}
h2 {font-family:Palatino Linotype;}
h3 {font-family:Arial;}
h4 {font-family:Arial Black;}
h5 {font-family:Impact;}
h6 {font-family:Courier New;}
p {font-family:initial;}
Hasilnya:
Value Property Font-Size
Diisi dengan nilai angka + satuannya. Satuan yang paling umum digunakan adalah px dan em.
Bedanya px dan em adalah kalau px itu nilai eksak dan pasti, sedangkan em adalah nilai relative.
Misalnya, jika 12px maka secara eksak pasti ukuran hurufnya adalah 12px. Tapi kalau 2em maka ukurannya 2x dari ukuran defaultnya.
Value Property Font-style
Value yang umum digunakan adalah italic dan normal. Italic untuk membuat huruf miring, kalau normal ya biar normal tidak ada style apapun.
p {
font-style:italic;
}
div {
font-style:normal;
}
Value Property Color
Kalau dulu ada properti font-color, tapi sekarang hanya menggunakan color saja untuk mendefinisikan warna.
Kamu bisa cek kode warna html untuk mengganti warna yang kamu inginkan. Kodenya bisa menggunakan HEX, RGB, CMYK, dll.
p {
color:red
}
h1 {
color:#000000
}
Value Property Weight
| Value | Keterangan |
|---|---|
| normal | Tebalnya normal |
| lighter | Lebih tipis |
| bolder | Lebih tebal |
| bold | Tebal |
| 100 200 300 400 500 600 700 800 900 | Sesuai dengan font yang tersedia, tidak semua font menyediakan ketebalan dari 100 – 900. Tapi, kalau ada silahkan dipakai angka ini. |
Contoh penggunaan:
p {
font-weight:bold
}
div {
font-weight:500;
}
h1 {
font-weight:lighter
}
Itu tadi adalah tutorial lengkap mengatur font dengan CSS. Semoga banyak membantu ya.