Pada artikel kali ini kita akan belajar memberikan css pada text.
Text Color
Untuk memberikan warna pada text, kamu bisa menggunakan property color
.
Daftar Isi
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