Halo teman-teman semuanya, setelah sebelumnya kita belajar tentang Box Model, sekarang kita akan fokus menghias teks agar tampilannya lebih rapi, estetis, dan mudah dibaca.
Dalam CSS, kita bisa mengatur gaya teks menggunakan properti seperti text-align, font-style, dan line-height. Dengan kombinasi yang tepat, teks di halaman web bisa terlihat lebih profesional.
1. Text-align: Mengatur Perataan Teks
Properti ini digunakan untuk mengatur perataan teks dalam elemen.
p {
text-align: center;
}
Nilai umum yang bisa digunakan:
left: rata kiri (default)right: rata kanancenter: rata tengahjustify: rata kiri-kanan (seperti koran)
Contoh:
h1 {
text-align: center;
}
2. Font-style: Mengatur Gaya Tulisan
Properti ini menentukan gaya huruf apakah normal, italic, atau oblique.
p {
font-style: italic;
}
Nilai yang umum:
normal: teks biasaitalic: teks miringoblique: miring juga, tapi dengan gaya lebih miring dari italic
3. Line-height: Mengatur Jarak Antar Baris
Properti ini digunakan untuk mengatur tinggi baris teks, yang sangat berguna untuk meningkatkan keterbacaan.
p {
line-height: 1.6;
}
Nilai bisa berupa:
- Angka relatif (contoh:
1.5, 2)
- Satuan absolut (contoh:
24px, 1em)
Contoh Lengkap
Contoh berikut memperlihatkan kombinasi text-align, font-style, dan line-height pada beberapa elemen teks.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Text Styling CSS</title>
<style>
body {
font-family: Georgia, serif;
background-color: #fafafa;
padding: 20px;
}
h1 {
text-align: center;
font-style: italic;
}
p {
line-height: 1.8;
text-align: justify;
}
.catatan {
font-style: oblique;
text-align: right;
}
</style>
</head>
<body>
<h1>Belajar CSS Menjadi Menyenangkan</h1>
<p>
Dengan CSS, kita bisa membuat teks terlihat jauh lebih enak dibaca.
Mengatur perataan, jarak antar baris, dan gaya huruf akan membantu pengguna menikmati konten tanpa merasa lelah membaca.
</p>
<p class="catatan">- Ditulis oleh Santri Koding</p>
</body>
</html>
Teks judul diratakan ke tengah dan dimiringkan, paragraf utama diratakan penuh dengan jarak baris lebar, dan catatan ditampilkan miring serta diratakan ke kanan. Kombinasi ini menjadikan halaman teks terlihat lebih rapi dan nyaman untuk dibaca.
Kesimpulan
Dalam materi ini, kita belajar cara mempercantik teks dengan properti text-align untuk perataan, font-style untuk gaya tulisan (miring atau biasa), dan line-height untuk mengatur spasi antar baris.
Di artikel berikutnya, kita akan membahas tentang Display & Visibility — bagaimana elemen ditampilkan atau disembunyikan di halaman, serta perbedaan antara block, inline, dan lainnya.
Terima Kasih