Mengatur Teks
Melalui kelas ini, kamu diajak untuk:
- Mengidentifikasi properti-properti pemformatan teks.
- Melakukan pemformatan teks lewat CSS.
Tentang Gaya Teks
Dalam default teks HTML, terdapat berbagai selector yang dapat digunakan untuk membuat teks seperti <h1>, <h2>, <h3>, dan yang paling sering digunakan untuk teks kecil yakni <p>.
Namun, selector bawaan HTML tersebut hanya mengatur besar kecilnya, tanpa mengurus jenis font apa atau sekompleks jarak hingga ketebalan teks.
Di bagian-bagian sebelumnya kita telah mengenal ukuran dan warna teks. CSS sendiri menyediakan banyak properti untuk mengatur gaya dan memformat teks. Mari telusuri apa saja yang bisa kita atur dari tampilan teks.
Memilih Font
Ada dua opsi dalam memilih font. Pertama, CSS memberi opsi font bawaan. Kedua, menggunakan font yang tersedia di laman open source seperti Google Font.
Untuk menggunakan layanan seperti Google Font, masuk ke laman Google Font lalu pilih font yang diinginkan, bahkan lebih dari satu font. Google Font kemudian menyediakan link yang harus dimasukkan ke bagian <head> dengan cara seperti berikut:
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Tangerine">
<style>
</style>
</head>
<body>
</body>
</html>Kemudian, font yang dipilih masih harus dimasukkan ke CSS. Pilih salah satu font yang hendak dipakai, lalu sandingkan dengan class yang dikehendaki. Misalnya code di bawah mensimulasikan perubahan font di class teks.
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Tangerine">
<style>
.teks {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div class="teks">Fontnya keren!</div>
</body>
</html>Penjajaran Teks
Penjajaran teks atau text alignment menggunakan properti text-align. Seperti yang mungkin sebagian besar kita ketahui, penjajaran teks terdiri dari kiri, kanan, tengah, dan kanan-kiri, begitu pula di CSS.
.teks {
text-align: left;
}Penjajaran teks juga bisa dilakukan secara vertikal (dari atas ke bawah) melalui properti vertical-align. Nilai yang menjadi opsi bukan lagi left, right, center, dan justify, tetapi top, middle, dan bottom.
.teks {
vertical-align: bottom;
}Jarak Teks
CSS menyediakan banyak variasi properti untuk mengatur jarak dalam teks. Simak apa saja properti-properti pengaturan jarak teks yang ada di CSS.
Ketuk untuk melihat penjelasan:letter-spacing
letter-spacing adalah pengaturan jarak antar karakter/huruf. Menggunakan nilai dengan satuan px, %, em, rem, dsb.
line-height
line-height adalah pengaturan jarak antar baris (jika teks terdiri dari lebih dari satu baris). Menggunakan nilai dengan satuan px, %, em, rem, dsb.
word-spacing
word-spacing adalah pengaturan jarak antar kata. Menggunakan nilai dengan satuan px, %, em, rem, dsb.
Misal kita ingin mengatur jarak antar baris di dalam paragraf kita. Maka kita hanya perlu memasukkan properti line-height.
.teks {
line-height: 20px;
}Sesuaikan Teks Sesukamu
Buat satu judul dan beberapa paragraf, lalu atur pemformatan teks, mulai dari penjajarannya hingga jarak teks sesuai selera membacamu. Selamat mencoba!
Kuis
Manakah selector untuk menentukan jarak antar-baris?