CSS : Text

Properti teks CSS memungkinkan kalian untuk menentukan banyak style teks seperti color, alignment, spacing, decoration, transformation dll. Dengan sangat mudah dan efektif.

Text Formating dengan CSS

CSS memiliki beberapa properti untuk menentukan style teks. Properti ini memberi kalian kontrol yang akurat atas tampilan visual karakter, spasi, kata, paragraf, dll.

Kalian dapat mengatur properti teks elemen berikut:

Text Color

Text color ditentukan oleh properti warna CSS. Berikut contohnya:

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

Catatan: Meskipun, text color sepertinya akan menjadi bagian dari teks CSS, tetapi sebenarnya itu merupakan properti mandiri di CSS.

Text Alignment

Properti text-align digunakan untuk mengatur horizontal alignment suatu teks.

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

h1 {
    text-align: center;
}
p {
    text-align: justify;
}

Text Decoration

Properti text decoration digunakan untuk mengatur atau menghapus dekorasi dari teks.

Nilai untuk properti ini adalah: none, underline, overline, line-through, blink dan inherit. Kalian harus menghindari underline text yang bukan tautan, karena hal tersebut dapat membingungkan pengunjung. Berikut contohnya:

h1 {
    text-decoration: overline;
}
h2 {
    text-decoration: line-through;
}
h3 {
    text-decoration: underline;
}

Menghapus Links Default Underline

Properti text-decoration biasanya digunakan untuk menghapus default underline text dari hyperlink. Menghapus semua underline dapat membingungkan pengunjung. Kecuali kalian memberikan beberapa isyarat visual lainnya untuk membuatnya terlihat menonjol, sembari menata tautannya.

Sebagai contoh, kalian dapat menggunakan titik-titik untuk meng-underline tautan kalian, bukan solid line. Berikut kodenya:

a {
    text-decoration: none;
    border-bottom: 1px dotted;
}

Text Transformation

Properti text-transform digunakan untuk mengatur cases untuk teks.

Text-transform dapat digunakan untuk mengatur konten teks elemen menjadi huruf besar atau kecil, atau menggunakan huruf kapital untuk huruf pertama dari setiap kata. Nilai untuk properti text-transform adalah: none, capitalize, uppercase, lowercase dan inherit. Berikut contohnya:

p.up {
    text-transform: uppercase;
}
p.cap {
    text-transform: capitalize;
}
p.low {
    text-transform: lowercase;
}

Text Indentation

Text-indent adalah salah satu property pada css, sedangkan fungsinya untuk membuat jarak/lekuk di awal paragraf, sedangkan valuenya antara lain percentage (%), length dan inherit. Berikut contohnya:

p {
    text-indent: 100px;
}