Belajar CSS Part 8 - Text Formatting

Assalamu'alaikum warohmatullaahi wabarokaatuh.

Pada artikel kali ini kita akan mempelajari tentang Text Formatting. Dengan fungsi Text Formatting atau Pemformatan Teks kita bisa memberikan pengaturan terhadap teks yang kita tulis sesuai dengan keinginan kita. Untuk lebih jelasnya langsung saja kita ke pembahasan. Berikut ini merupakan properti-properti yang bisa kita gunakan untuk melakukan Text Formatting.

A. TEXT COLOR

text-color adalah properti yang bisa kita gunakan untuk memberikan pengaturan warna terhadap teks. Seperti biasa untuk value warna kita bisa menggunakan nama warna, kode hexa, atau kode RGB. Untuk penggunaan warna pernah kita pelajari pada Belajar HTML Part 19 - Penyisipan Warna. Contoh penggunaannya pada CSS adalah sebagai berikut :

body {
    color: blue;
}

h1 {
    color: green;
}

Penjelasan :

• Dengan script CSS di atas, seluruh teks yang berada pada bagian body akan berwarna biru kecuali teks yang diberi tag h1.

Coba sendiri di sini

B. TEXT ALIGNMENT

text-alignment adalah properti yang digunakan untuk mengatur sebuah teks atau paragraf apakah akan rata kiri, rata tengah, atau rata kanan. Contoh penggunaannya pada CSS adalah sebagai berikut :

h1 {
    text-align: left;
}

h2 {
    text-align: center;
}

h3 {
    text-align: right;
}

Penjelasan :

• Dengan script CSS di atas, elemen dengan tag h1 akan tersusun rata kiri, elemen h2 akan tersusun rata tengah, dan elemen h3 akan tersusun rata kanan.

Coba sendiri di sini

C. TEXT DECORATION

text-decoration biasa digunakan untuk menghapus decoration berupa garis bawah dari sebuah teks. Contoh penggunaannya pada CSS adalah sebagai berikut :

h1 {
    text-decoration: none;
}

h2 {
    text-decoration: overline;
}

h3 {
    text-decoration: line-through;
}
h4 {
    text-decoration: underline;
}

Penjelasan :

• Dengan script CSS di atas, elemen dengan tag h1 tidak akan diberi decoration apapun.
• Elemen dengan tag h2 akan diberi garis atas.
• Elemen dengan tag h3 akan diberi garis yang mencoret teks.
• Elemen dengan tag h4 akan diberi garis bawah.

Coba sendiri di sini

D. TEXT TRANSFORMATION

text-transform adalah properti yang digunakan untuk mengatur kapitalisasi dari sebuah teks. Misal mengatur sebuah teks apakah akan dijadikan huruf kapital semua, apakah hanya awalnya saja, atau dijadikan huruf kecil semua. Contoh penggunaannya pada CSS adalah sebagai berikut :

p.uppercase {
    text-transform: uppercase;
}
p.lowercase {
    text-transform: lowercase;
}

p.capital {
    text-transform: capitalize;
}

Penjelasan :

• Dengan script CSS di atas, elemen paragraf dengan class uppercase akan dijadikan huruf kapital secara keseluruhan.
• Elemen paragraf dengan class lowercase akan dijadikan huruf kecil seluruhnya.
• Elemen paragraf dengan class capital akan dijadikan huruf kapital di setiap awal kata.

Coba sendiri di sini

E. TEXT INDENTATION

text-indent adalah properti yang digunakan untuk mengatur ukuran seberapa jauh baris pertama menjorok. Contoh penggunaannya pada CSS adalah sebagai berikut :

p {
    text-indent: 10px;
}

Penjelasan :

• Dengan script CSS di atas, elemen paragraf dalam file HTML yang kita buat akan menjorok ke dalam sejauh 10 piksel.

Coba sendiri di sini

F. LETTER SPACING

letter-spacing adalah properti yang digunakan untuk mengatur jarak antar huruf. Contoh penggunaannya pada CSS adalah sebagai berikut :

p {
    letter-spacing: 2px;
}

Penjelasan :

• Dengan script CSS di atas, Setiap huruf pada elemen paragraf dalam file HTML yang kita buat akan diberi jarak sebanyak 2 piksel.

Coba sendiri di sini

G. LINE HEIGHT

line-height adalah properti yang digunakan untuk mengatur jarak antar baris. Contoh penggunaannya pada CSS adalah sebagai berikut :

p {
    line-height: 0.8;
}

Penjelasan :

• Dengan script CSS di atas, Setiap baris pada elemen paragraf dalam file HTML yang kita buat akan diberi jarak 0.8 inchi.

Coba sendiri di sini

H. TEXT DIRECTION

direction adalah properti yang digunakan untuk menentukan apakah kita akan menulis dari kiri ke kanan, atau kanan ke kiri. Ya, kita bisa merubah teks menjadi ditulis dari kanan. Contoh penggunaannya pada CSS adalah sebagai berikut :

p {
    direction: rtl;
}

Penjelasan :

• Dengan script CSS di atas, Paragraf yang kita tulis akan berorientasi dari kanan ke kiri. rtl di sana berarti right to left.

Coba sendiri di sini

I. WORD SPACING

word-spacing adalah properti yang digunakan untuk mengatur jarak antar kata. Contoh penggunaannya pada CSS adalah sebagai berikut :

p {
    word-spacing: 4px;
}

Penjelasan :

• Dengan script CSS di atas, Setiap kata pada elemen paragraf dalam file HTML yang kita buat akan diberi jarak sebanyak 5 piksel.

Coba sendiri di sini

Demikian Belajar CSS Part 8 tentang Text Formatting, semoga bermanfaat.
Terima kasih dan wassalamu'alaikum warohmatullaahi wabarokaatuh.