Format teks dengan CSS

Perataan, kapitalisasi, dekorasi, hingga jarak antar huruf.

Pahami konsepnya

Properti teks mengatur perilaku tulisan di luar font-nya sendiri. Perataan: text-align dengan left, right, center, atau justify (rata kedua sisi seperti kolom koran). Kapitalisasi: text-transform memaksa uppercase, lowercase, atau capitalize (huruf awal tiap kata besar) tanpa mengubah teks aslinya.

Dekorasi garis diurus text-decoration: underline, overline, line-through (mencoret), atau none — nilai terakhir ini paling sering dipakai untuk melepas garis bawaan tautan. Jarak-jarak juga properti teks: letter-spacing merenggangkan antar huruf, word-spacing antar kata, line-height mengatur tinggi baris (nilai tanpa satuan seperti 1.7 berarti 1,7 kali ukuran font), dan text-indent menjorokkan baris pertama paragraf.

Satu lagi yang memukau: text-shadow menambah bayangan teks dengan tiga nilai — geser horizontal, geser vertikal, lalu warna (text-shadow: 2px 3px gray). Perhatikan detail penting: warna teks diatur properti color — bukan font-color seperti kadang tertukar — karena color berlaku untuk semua teks.

Coba contoh kode

.judul {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-shadow: 2px 2px #ccc;
}

.artikel {
  text-align: justify;
  text-indent: 30px;
  line-height: 1.8;
}

.harga-lama {
  text-decoration: line-through;
  color: gray;
}

Tiga kelas tiga suasana: judul mewah dengan kapital dan bayangan, artikel koran dengan justify-indent-baris lapang, dan harga lama tercoret abu-abu. Kombinasi kecil-kecil beginilah yang membedakan halaman datar dan halaman yang tertata.

Latihan singkat

Tata ulang satu artikel: judul uppercase berbayangan, isi justify dengan line-height 1.8 dan indentasi, lalu coret satu kalimat promosi lamanya.