Mengatur format text dengan CSS

Memformat Teks dengan CSS

CSS menyediakan beberapa properti yang memungkinkan Anda untuk menentukan berbagai gaya teks seperti color, alignment, spacing, decoration, transformation dll.

Sifat-sifat teks yang umum digunakan adalah: properti text-align, text-decoration, text-transform, text-indent, line-height, letter-spacing, word-spacing dan banyak lagi. Properti ini memberi Anda kontrol yang tepat atas tampilan visual karakter , kata , spasi , dan sebagainya.

Text color

Dengan properti color Anda bisa menggunakannya untuk memberikan warna pada teks.

Nilai color dapat diatur oleh:

• nama – tentukan nilai color nama, seperti red
• Hex – tentukan nilai color hex, seperti #ff0000
• RGB – tentukan nilai color RGB, seperti rgb (255,0,0)
• transparan
• dll

h1 {
    color: blue;
}
p {
    color: #ff0000;
}

Text alignment

Dengan properti text-align Anda bisa menggunakannya untuk mengatur keselarasan teks secara horizontal.

Kemungkinan nilai untuk properti ini adalah: left, right, center, justify dan inherit.

#p1 {
    text-align: center;
}
#p2 {
    text-align: left;
}
#p3 {
    text-align: right;
}

 Properti text-align dengan nilai “justify” memberikan style untuk setiap baris meregang sehingga setiap baris memiliki lebar yang sama, kiri dan kanan margin lurus (seperti di majalah dan koran):

div {
    text-align: juftify;
}

Text decoration

Dengan properti text-decoration Anda bisa menggunakannya untuk mengatur hiasan teks yang bergaris.

Kemungkinan nilai untuk properti ini adalah: none, underline, overline, line-through, blink dan inherit.

#p1 {
    text-decoration: overline;
}
#p2 {
    text-decoration: line-through;
}
#p3 {
    text-decoration: underline;
}

Anda juga bisa menggunakan properti text-decoration untuk menghilangkan garis bawah pada link.

#hide {
    text-decoration: none;
}

Text transformation

Text transformation digunakan untuk menentukan huruf besar dan huruf kecil dalam teks, atau memberikan huruf besar bagian pertama dari setiap kata. Untuk menggunakannya Anda cukup memanggil properti: text-transform.

Kemungkinan nilai untuk properti ini adalah: none, capitalize, uppercase, lowercase dan inherit.

#p1 {
    text-transform: uppercase;
}
#p2 {
    text-transform: lowercase;
}
#p3 {
    text-transform: capitalize;
}

Text indentation

Text-indentation digunakan untuk menentukan indentasi baris pertama atau lebih tepatnya memberikan lekukan pada teks pertama. Untuk menggunakannya Anda cukup memanggil properti: text-indent.

p {
    text-indent: 60px;
}

Letter spacing

Letter spacing digunakan untuk menentukan ruang antara karakter dalam teks. Untuk menggunakannya Anda cukup memanggil properti: letter-spacing. Anda bisa menggunakan nilai negatif.

h1 {
    letter-spacing: 6px;
}
h2 {
    letter-spacing: -3px;
}

Line height

Line height digunakan untuk menentukan ruang antara garis. Untuk menggunakannya Anda cukup memanggil properti: line-height.

#p1 {
    line-height: 0.7;
}
#p2 {
    line-height: 2.0;
}

Text direction

Text direction digunakan untuk mengubah arah teks. Untuk menggunakannya Anda cukup memanggil properti: direction.

#p2 {
    direction: rtl;
}

Word spacing

Word spacing digunakan untuk menentukan lebar dari sepasi dalam sebuah teks. Untuk menggunakannya Anda cukup memanggil properti: word-spacing. Nilai negatif dibolehkan.

h1 {
    word-spacing: 15px;
}
h2 {
    word-spacing: -5px;
}

Text shadow

Text-shadow digunakan untuk menambahkan bayangan untuk teks. Cara menggunakannya Anda cukup memanggil properti: text-shadow. Nilai negatif dibolehkan.

h1 {
    text-shadow: 4px 2px orange;
}

Contoh diatas menentukan posisi bayangan:

horizontal 4px

vertikal 2px dan

warna orange atau oren.

Daftar properti text