Tutorial CSS : Styling Text CSS

CSS
27 Jul 2022
2084

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

Artikel Lainnya

Artikel lain yang mungkin menarik juga untuk kamu baca.

Tutorial CSS : Membuat List di CSS

List adalah salah satu elemen HTML yang digunakan untuk mengelompokkan informasi terkait sehingga menjadi kait mengait satu sama lain dan memudahkan untuk dibaca. Dalam pengembangan web modern, list adalah elemen yang sering digunakan untuk design navigasi.
Agus Yusida
5 min read 2136

Tutorial CSS : Membuat Margin CSS

Margin CSS berfungsi untuk memberikan batas di luar sebuah elemen, di luar border dari sebuah elemen.
Agus Yusida
5 min read 2100

Tutorial CSS : Membuat Padding CSS

Padding CSS berfungsi untuk memberikan ruangan di dalam sebuah elemen, di dalam border dari sebuah elemen.
Agus Yusida
5 min read 1870

© 2024