Belajar CSS Bagian 7: Mengatur Text Formatting dengan CSS

Setelah pada series belajar CSS bagian 6 kita belajar tentang menggunakan Background di CSS, dalam artikel ini kami akan melanjutkan pembahasannya tentang cara mengatur text formatting dengan CSS.

Memformat teks dengan CSS yang tepat dapat meningkatkan tampilan antarmuka pengguna (user interface) pada website, menjadikannya lebih menarik dan mudah dibaca.

Hal ini penting untuk dipahami, karena teks adalah elemen yang sering kita temui saat mengelola atau membangun halaman web. Simak tutorial belajar CSS bagian ke 6 tentang text formatting berikut ini.

Apa itu Teks Formatting?

Teks formatting adalah penerapan styling yang digunakan untuk mengatur dan mengontrol tampilan dan letak teks dalam script html atau dalam tampilan halaman website menggunakan script CSS.

Jenis Properti Teks Formatting

Pada dasarnya, penulisan formating teks sama seperti penulisan CSS pada umumnya yang telah dibahas pada artikel mengenal sintaks dasar CSS. Namun secara umum, properti yang sering digunakan dan ditemukan untuk teks formatting adalah:

• font
• text-color 
• text-align 
• text-decoration 
• text-transform
• text-spacing 
• letter-spacing 
• line-height 
• direction

Dalam artikel ini, kami akan membahas semua teks formatting diatas, agar Anda lebih memahami CSS secara lebih mendalam.

Font

Font yang tepat dapat membuat tampilan antarmuka pengguna (user interface) pada website lebih menarik dan mudah dibaca. Berikut adalah beberapa properti font yang sering digunakan.

Font Family : Menentukan jenis huruf yang digunakan.
Contoh kode CSS:

font-family: Arial, sans-serif;

Font Size : Menentukan ukuran huruf.
Contoh kode CSS:

font-size: 16px;

Font Style : Menentukan gaya huruf (normal, italic, oblique).
Contoh kode css :

font-style: italic;

Font Weight : Menentukan ketebalan huruf (normal, bold, bolder, lighter, atau nilai numerik).
Contoh kode css :

font-weight: bold;

Text-color

Untuk mengatur warna teks, anda dapat mempelajari pada artikel berikut Memberikan Warna Pada Text

Text-align

Properti text-align adalah properti untuk mengatur perataan teks seperti rata kiri, rata tengah, posisi di tengah dan rata kiri dan kanan.

nilai yang digunakan yaitu :
left : penulisan rata kiri
right : penulisan rata kanan
center : penulisan rata tengah
justify : penulisan rata kiri dan kanan

Contoh kode :

text-align: center;

Text-decoration

Text-decoration adalah properti untuk memberikan garis pada teks seperti garis bawah, garis atas, dan garis di tengah (teks tercoret).

nilai yang digunakan yaitu :
none : penulisan tidak menggunakan dekorasi garis apapun;
underline : penulisan akan memberikan dekorasi garis bawah;
overline : penulisan dekorasi dengan garis di atas teks;
line-through : penulisan dekorasi garis di tengah atau teks tercoret.

Contoh kode :

text-decoration: underline;

Text-transform

Text-transform adalah properti untuk merubah bentuk teks seperti merubah menjadi huruf besar semua, huruf kecil semua, dan huruf pertama hanya kapital

nilai yang digunakan yaitu :
lowercase : merubah semua teks menjadi huruf kecil;
uppercase : merubah semua teks menjadi huruf kapital (besar);
capitalize : merubah teks pada huruf pertama kata menjadi kapital.
none : tidak ada perubahan pada text.

Contoh kode :

text-transform: uppercase;

Text-shadow

Properti text-shadow adalah properti untuk memberikan bayangan pada teks. Format penulisan properti text-shadow sebagai berikut :

text-shadow: x y blur color;

nilai yang digunakan yaitu :
x : jarak bayangan sumbu x (vertikal).
y : jarak bayangan sumbu y (horizontal).
blur : ukuran kepudaran dari bayangan.
color : warna bayangan.

Contoh kode :

text-shadow: 1px 1px 2px #000000;

Word-spacing

Properti wext-spacing adalah properti untuk mengatur jarak antar kata.

Contoh kode :

word-spacing: 4px;

Letter-spacing

Properti letter-spacing adalah properti untuk mengatur jarak antar huruf.

Contoh kode :

line-height: 1.5;

Direction

Properti direction adalah properti untuk untuk menentukan arah baca teks. Contohnya dari kiri ke kanan (ltr) atau dari kanan ke kiri (rtl).

Contoh kode :

direction: rtl;

Contoh screenshoot penggunaan direction rtl :

Contoh Penerapan Text Formatting

Berikut adalah salah satu contoh kode lengkap yang dapat Anda gunakan untuk menerapkan text formatting :

<!DOCTYPE html>
<html>
<head>
    <title>Mengatur Text Formatting dengan css</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <style>
        .font-cursive {
            font-family: cursive;
        }
        .font-size {
            font-size: 24px;
        }
        .font-style {
            font-style: italic;
        }
        .font-weight {
            font-weight: bold;
        }
        .text-color {
            color: red;
        }
        .text-align {
            text-align: center;
        }
        .text-decoration {
            text-decoration: underline;
        }
        .text-transform {
            text-transform: uppercase;
        }
        .text-shadow {
            text-shadow: 1px 1px 2px blue;
        }
        .word-spacing {
            word-spacing: 10px;
        }
        .letter-spacing {
            letter-spacing: 10px;
        }
        .line-height{
            line-height: 2.5;
        }
        .direction{
            direction: rtl;
        }
    </style>
</head>
<body>
    <p class="font-cursive"> Ini adalah paragraf yang <b>menggunakan font-family cursive</b></p>
    <p class="font-size">Ini adalah paragraf yang <b>menggunakan font-size: 24px</b></p>
    <p class="font-style">Ini adalah paragraf yang <b>menggunakan font-style: italic</b></p>
    <p class="font-weight">Ini adalah paragraf yang <b>menggunakan font-weight: italic</b></p>
    <p class="text-color">Ini adalah paragraf yang <b>menggunakan color: red</b></p>
    <p class="text-align">Ini adalah paragraf yang <b>menggunakan text-align: center</b></p>
    <p class="text-decoration">Ini adalah paragraf yang <b>menggunakan text-decoration: underline</b></p>
    <p class="text-transform">Ini adalah paragraf yang <b>menggunakan text-transform: uppercase</b></p>
    <p class="text-shadow">Ini adalah paragraf yang <b>menggunakan text-shadow: blue</b></p>
    <p class="word-spacing">Ini adalah paragraf yang <b>menggunakan word-spacing: 20px</b></p>
    <p class="letter-spacing">Ini adalah paragraf yang <b>menggunakan letter-spacing: 20px</b></p>
    <p class="line-height">Ini adalah paragraf <br>yang <b>menggunakan line-height: 2.5</b></p>
    <p class="direction">Ini adalah paragraf yang <b>menggunakan direction: rtl</b></p>
</body>
</html>

Ketika dicoba akses melalui browser, tampilannya akan seperti screenshot berikut :

Kesimpulan

Text formatting digunakan untuk mengatur dan menata tampilan teks agar lebih rapi, menarik, dan mudah dibaca. Dengan text formatting, pengunjung website Anda akan lebih nyaman saat membaca informasi di web Anda, sehingga pesan di website dapat disampaikan dengan lebih efektif.

Pada series belajar CSS bagian ke 8, kami akan menjelaskan tentang mengatur ukuran elemen dengan CSS.

Demikian series belajar CSS bagian ke 7 tentang text formatting. Simak terus artikel belajar CSS dari Rumahweb Indonesia, untuk meningkatkan skill dan pemahaman CSS yang Anda kuasai. Semoga bermanfaat.