Memformat teks adalah salah satu tugas dasar namun krusial dalam mendesain halaman web. Dengan CSS, Anda bisa mengendalikan setiap aspek dari tampilan teks, mulai dari jenis huruf hingga jarak antar baris, untuk menciptakan pengalaman membaca yang nyaman dan menarik.
Ada beberapa properti CSS utama yang digunakan untuk mengontrol tampilan teks. Mari kita bahas satu per satu.
color
Properti color digunakan untuk mengatur warna teks. Anda dapat menggunakan nama warna (misalnya, red), kode heksadesimal (#FF5733), nilai RGB (rgb(255, 87, 51)), atau HSL (hsl(10, 100%, 60%)).
p {
color: blue;
}
font-family
Properti font-family menentukan jenis huruf yang digunakan. Anda bisa menentukan satu jenis huruf atau daftar beberapa jenis huruf sebagai “fallback” (cadangan). Browser akan mencoba jenis huruf pertama; jika tidak tersedia, browser akan mencoba yang berikutnya, dan seterusnya.
body {
font-family: Arial, Helvetica, sans-serif;
}
Tips: Selalu sertakan jenis huruf umum (generic font family) di akhir daftar, seperti serif, sans-serif, atau monospace, sebagai cadangan terakhir.
font-size
Properti font-size mengatur ukuran teks. Nilai yang umum digunakan adalah px (piksel), em (relatif terhadap ukuran font elemen induk), rem (relatif terhadap ukuran font elemen root/html), atau vw (persentase lebar viewport).
h1 {
font-size: 32px;
}
font-weight
Properti font-weight digunakan untuk mengatur ketebalan teks, misalnya bold (tebal) atau normal. Beberapa font juga mendukung nilai numerik seperti 100 hingga 900 untuk tingkat ketebalan yang lebih spesifik.
strong {
font-weight: bold;
}
font-style
Properti font-style mengatur gaya teks, biasanya digunakan untuk membuat teks menjadi italic (miring) atau normal.
em {
font-style: italic;
}
Properti Lanjutan untuk Tata Letak Teks
Selain properti dasar di atas, ada beberapa properti lain yang sangat berguna untuk mengatur tata letak dan penampilan teks secara keseluruhan.
text-align
Properti text-align mengatur perataan horizontal teks dalam sebuah elemen. Pilihan yang tersedia adalah left (kiri), right (kanan), center (tengah), dan justify (rata kiri-kanan).
h2 {
text-align: center;
}
line-height
Properti line-height mengatur jarak antar baris teks. Nilai ini sangat penting untuk meningkatkan keterbacaan. Umumnya, nilai 1.5 atau 1.6 dianggap ideal untuk teks paragraf.
p {
line-height: 1.6;
}
text-decoration
Properti text-decoration digunakan untuk menambah atau menghilangkan dekorasi pada teks, seperti garis bawah. Nilai yang paling umum adalah none untuk menghilangkan garis bawah pada tautan (<a>), underline (garis bawah), overline (garis atas), dan line-through (garis coret).
a {
text-decoration: none;
}
text-transform
Properti text-transform mengubah kapitalisasi teks tanpa mengubah kode HTML-nya. Pilihan yang tersedia adalah uppercase (huruf besar semua), lowercase (huruf kecil semua), atau capitalize (huruf kapital di awal setiap kata).
h3 {
text-transform: uppercase;
}
Dengan menggabungkan properti-properti di atas, Anda dapat mengontrol penuh tampilan teks di website Anda, menjadikannya lebih menarik dan mudah dibaca oleh pengunjung.
