Menguasai Text Formatting: Mempercantik Tampilan Teks CSS

Tipografi yang baik bukan hanya soal memilih font, tapi juga soal bagaimana teks tersebut disajikan. Berikut adalah empat properti dasar yang akan sering Anda gunakan:

1. Text-Align (Perataan Teks)

Properti ini digunakan untuk mengatur posisi horizontal teks di dalam elemen kontainernya.

• left: Rata kiri (default).

• right: Rata kanan.

center: Rata tengah (sering digunakan untuk judul). justify: Rata kiri-kanan (membuat blok teks terlihat rapi seperti di koran).

2. Text-Decoration (Dekorasi Teks)

Digunakan untuk menambahkan atau menghapus garis dekoratif pada t eks.

•  

• none: Menghapus dekorasi (sangat sering digunakan untuk menghilangkan garis bawah otomatis pada tag ).

•  

underline: Garis bawah.

line-through: Garis coret (sering untuk harga diskon).

overline: Garis di atas teks.

3. Text-Transform (Transformasi Huruf)

Memungkinkan Anda mengubah besar-kecilnya huruf tanpa harus mengubah teks asli di HTML. Ini sangat berguna agar data dari database tetap konsisten tampilannya.

•  

• uppercase: Mengubah semua huruf menjadi KAPITAL.

•  

• lowercase: Mengubah semua huruf menjadi kecil.

•  

• capitalize: Mengubah huruf pertama setiap kata menjadi Kapital.

•  

4. Letter-Spacing (Jarak Antar Huruf)

Mengatur spasi di antara karakter. Properti ini sering digunakan untuk memberikan kesan elegan pada judul atau navigasi.

•  

• Nilai positif (misal 2px): Memberikan kesan lega dan modern.

•  

• Nilai negatif (misal -1px): Membuat teks terlihat lebih padat.

•  

Tutorial: Membuat Header dan Konten yang Estetik

Mari kita satukan properti di atas dalam sebuah contoh praktis.

Struktur HTML

< code class="code-container formatted ng-tns-c289529910-1518" role="text" data-test-id="code-content"><div class="card"> <p class="category">Teknologip> <h2 class="tit le">Belajar Laravel 11h2> <p class="description"> Pelajari cara membuat aplikasi web modern dengan framework PHP paling populer di dunia. p> <a href="#" class="btn-link">Baca Selengkapnyaa>
div>

.card { width: 350px; padding: 20px; border: 1px solid #ddd;
} .category { text-transform: uppercase; /* Membuat kategori jadi kapital semua */ letter-spacing: 3px; /* Memberi jarak agar terlihat elegan */ font-size: 12px; color: #888; text-align: center;
} .title { tex t-align: center; text-decoration: underline; text-decoration-color: #007bff; /* Garis bawah berwarna biru */ margin: 10px 0;
} .description { text-align: justify; /* Rata kiri-kanan agar rapi */ line-height: 1.5;
} .btn-link { display: block; text-align: center; text-decoration: none; /* Menghapus garis bawah link default */ text-transform: capitalize; font-weight: bol d; color: #007bff; margin-top: 15px;
}