Properti teks mengatur detail tulisan di luar font: rata kiri atau tengah, huruf kapital, garis bawah, dan jarak antarhuruf. Semuanya cuma mengubah tampilan, teks aslinya di HTML tetap sama.
🧪 Tebakan cepat:
text-transform: uppercasemengubah teks di HTML-nya jadi kapital, atau cuma tampilannya? Tebak dulu, jawabannya ada di bagian "Rata, kapital, dan garis".
Rata, kapital, dan garis
p {
text-align: center;
text-transform: uppercase;
text-decoration: underline;
}
padalah selector: aturannya buat semua<p>. Tiap baris di dalam{ }adalah deklarasi: properti, titik dua, nilai, titik koma.text-align: center;membuat teks rata tengah. Nilai lainnyaleft(bawaan),right, danjustify(rata kiri dan kanan).text-transform: uppercase;menampilkan semua huruf kapital. Ada jugalowercase(kecil semua),capitalize(huruf pertama tiap kata kapital), dannone.text-decoration: underline;memberi garis bawah. Ada jugaline-through(dicoret) dannone(tanpa garis).
Hasilnya, paragraf rata tengah, kapital semua, dan bergaris bawah. Jawaban tebakan: cuma tampilannya. Teks di HTML tetap seperti yang kamu ketik, CSS cuma menggambarnya kapital, jadi kamu gak perlu mengetik ulang.
text-align mengatur posisi teks di dalam kotaknya sendiri. Judul dan paragraf selebar halaman, jadi center menaruh teksnya di tengah halaman.
Jarak antarhuruf dan garis di link
letter-spacing: 2px;menambah jarak 2 piksel di antara tiap huruf. Cocok buat judul kapital atau link pendek, terlalu renggang buat paragraf panjang.word-spacingmengatur jarak antarkata dengan cara yang sama.
Link <a> sudah bergaris bawah dari sananya, dan text-decoration: none menghapusnya. Kalau garisnya dihapus, kasih tanda lain, misalnya warna yang beda, biar link-nya tetap kelihatan bisa diklik.
⚠️ Jebakan yang sering ketemu
- Nama nilai yang dikarang.
text-align: middledantext-decoration: underlinedgak dikenal browser. Tuliscenterdanunderline. text-aligndi link.<a>cuma selebar teksnya, jaditext-align: centerdi<a>gak kelihatan efeknya. Taruh di induknya, misalnya<p>.justifydi kolom sempit. Muncul celah lebar di antara kata. Buat teks di web,leftbiasanya lebih enak dibaca.
TL;DR: text-align meratakan teks (left, center, right, justify), text-transform mengubah tampilan huruf (uppercase, lowercase, capitalize) tanpa mengubah HTML-nya, text-decoration menambah atau menghapus garis (underline, line-through, none), dan letter-spacing mengatur jarak antarhuruf (2px).
