Pada artikel kali ini kita akan belajar memberikan css pada text.

Text Color

Untuk memberikan warna pada text, kamu bisa menggunakan property color.

Contohnya:

body {
  color: blue;
}

h1 {
  color: green;
}

p {
  color: red;
}

Text Align

text-align berfungsi untuk mengatur align dari text.

Valuenya adalah left, right, center, justify atau inherit.

Contohnya:

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

#p4 {
    text-align: justify;
}

Text Decoration

Text decoration berfungsi untuk memberikan styling text seperti memberi garis bawah dan yang lainnya.

Value dari text-decoration adalah none, underline, overline, line-through, blink dan inherit.

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

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.

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.

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.

Line height

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

Text direction

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

Word spacing

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

Text shadow

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

Nah itulah pembahasan tentang styling text dalam css. Semoga artikel ini bisa membuat kamu lebih mengerti tentang styling text dalam css.

Kunjungi artikel tentang css lainnya di link berikut: Belajar CSS