Tutorial CSS kali ini yaitu membahas tentang bagaimana mengatur font dengan CSS. Misalnya, merubah font, mengatur warna font, ukuran font serta jenis bentuk font(huruf tebal, garis bawah, tulisan miring). Mengatur font dalam web memang penting agar tampilan web yang kita buat lebih menarik dan membuat tampilan lebih professional.
Syntax yang digunakan pada CSS untuk mengatur font :
Berikut contoh penggunaannya :
index.html
style.css
Hasil
Syntax yang digunakan pada CSS untuk mengatur font :
- color digunakan untuk merubah warna font.
- font-size digunakan untuk mengatur ukuran font.
- font-family digunakan untuk mengubah jenis font.
- font-style untuk merubah gaya font.
- font-weight digunakan untuk mengatur ketebalan font.
Berikut contoh penggunaannya :
index.html
<html>
<head>
<title> Judul </title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="font1"> Belajar CSS </div><br>
<div class="font2"> Belajar CSS </div><br>
<div class="font3"> Belajar CSS </div><br>
</body>
</html>
<head>
<title> Judul </title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="font1"> Belajar CSS </div><br>
<div class="font2"> Belajar CSS </div><br>
<div class="font3"> Belajar CSS </div><br>
</body>
</html>
style.css
body{
padding: 20px 100px;
}
.font1{
font-family: sans-serif;
font-size: 30px;
color: red;
}
.font2{
font-style: italic;
font-size: 20px;
color: green;
}
.font3{
font-weight: bold;
font-size: 30pt;
color: red;
}
padding: 20px 100px;
}
.font1{
font-family: sans-serif;
font-size: 30px;
color: red;
}
.font2{
font-style: italic;
font-size: 20px;
color: green;
}
.font3{
font-weight: bold;
font-size: 30pt;
color: red;
}
Hasil
*Simpan file index.html dan style.css di folder yang sama dan jalankan index.html di browser kesayangan anda. Sekian Tutorial Mengatur Font Dengan CSS, semoga bermanfaat dan terimakasih sudah berkunjung.
Komentar
Posting Komentar