Series Mahir CSS #7 : CSS Formating

Apa Itu Format Teks?

Format teks adalah cara kita mengatur tampilan teks di sebuah halaman web. Misalnya, kamu ingin menebalkan judul, membuat teks miring untuk penekanan, atau bahkan mengatur perataan (alignment) teks. CSS punya berbagai properti untuk mengatur semuanya.

Properti Dasar untuk Format Teks

1. text-align
   Digunakan untuk mengatur perataan teks. Nilai yang bisa kamu gunakan:

   • left: Rata kiri (default).
   • center: Rata tengah.
   • right: Rata kanan.
   • justify: Rata kanan-kiri (seperti di koran).

   Contoh:

   p {
       text-align: justify;
   }
   

2. text-decoration
   Mengatur dekorasi teks, seperti garis bawah, garis di tengah, atau menghilangkan dekorasi.

   • none: Menghapus dekorasi.
   • underline: Garis bawah.
   • line-through: Garis di tengah.

   Contoh:

   p {
       text-decoration: underline;
   }
   

3. text-transform
   Mengatur kapitalisasi teks.

   • uppercase: Semua huruf jadi besar.
   • lowercase: Semua huruf jadi kecil.
   • capitalize: Huruf pertama setiap kata jadi besar.

   Contoh:

   h1 {
       text-transform: uppercase;
   }

4. letter-spacing
   Mengatur jarak antar huruf.

   Contoh:

   h2 {
       letter-spacing: 2px;
   }
   

5. line-height
   Mengatur jarak antar baris teks.

   Contoh:

   p {
       line-height: 1.8;
   }
   

6. font-style
   Mengatur gaya teks, seperti italic.

   Contoh:

   em {
       font-style: italic;
   }
   

7. font-weight
   Mengatur ketebalan teks. Nilainya bisa berupa:

   • normal
   • bold
   • Angka dari 100 (paling tipis) sampai 900 (paling tebal).

   Contoh:

   strong {
       font-weight: bold;
   }
   

Contoh Kombinasi Properti

Coba gabungkan beberapa properti untuk menghasilkan tampilan yang menarik.

h1 {
    font-family: 'Arial', sans-serif;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 3px;
    font-weight: 700;
    text-decoration: underline;
}

HTML:

<h1>Judul Besar yang Menarik</h1>

Membuat Efek Hover pada Teks

Biar teks lebih interaktif, tambahkan efek hover:

h2 {
    color: #2c3e50;
    text-transform: capitalize;
    transition: color 0.3s ease;
}

h2:hover {
    color: #e74c3c;
}

HTML:

<h2>Gerakkan mouse di sini</h2>

Format Teks Responsif

Saat mengatur teks untuk berbagai ukuran layar, gunakan satuan seperti em atau rem agar lebih fleksibel.

Contoh:

body {
    font-size: 1rem; /* 16px */
    line-height: 1.5;
}

@media (max-width: 768px) {
    body {
        font-size: 0.9rem; /* 14.4px */
    }
}

Tips Format Teks

1. Gunakan kontras warna yang baik: Pastikan teks mudah dibaca, terutama untuk background gelap atau terang.
2. Hindari terlalu banyak gaya: Terlalu banyak efek bisa membuat teks sulit dibaca.
3. Jangan lupa responsif: Selalu cek tampilan teks di perangkat yang lebih kecil.

Sekianlah belajar CSS tentang format teks. Dengan properti yang tepat, kamu bisa membuat teks terlihat lebih rapi dan profesional. Artikel ini sangat berguna sebelum kamu melanjutkan ke tutorial CSS selanjutnya di www.code80vity.com. Sampai jumpa di artikel berikutnya, dan tetap semangat belajar! ?