Belajar CSS 4: CSS Text

Tutorial CSS text untuk pemula, ditulis dengan bahasa yang ringan dan mudah dipahami.

Dalam seri belajar css 3 lalu kita mempelajari warna css style background, Nah.. yang termasuk css style selain CSS background ada CSS text, CSS font, CSS link, CSS list dan CSS table. Kali ini kita akan membahas CSS Text. CSS text digunakan untuk mengatur tampilan teks dalam html, mulai dari text color (warna text alignment (posisi teks rata kiri, kanan, justify, atau center), text decoration (garis bawah), text transformation (text kapital atau huruf kecil), juga text indentation (posisi teks menjorok).

CSS text bisa digunakan untuk mengatur text color. Caranya bisa dengan menambahkan pada declaration syntak color=”warna”. Seperti contoh dibawah ini:

?

1 2 3 4 5

body {color:blue;}   h1 {color:#00ff00;}   h2 {color:rgb(255,0,0);}

Untuk mengatur posisi text, baik rata kiri, kanan, center, ataupun rata kanan kiri, maka syntak yang ditambahkan pada declaration CSS text yakni text-align=”nilai” dimana nilai bisa diisi left, right, center, justify

Contoh kode:

?

1	p {text-align:center;}

Properti text-decoration CSS text ini digunakan untuk membuat atau menghapus dekorasi dari teks.

Properti text-decoration banyak digunakan untuk menghapus menggarisbawahi dari link untuk tujuan desain, contoh :

?

1	a {text-decoration:none;}

Untuk lebih jelas akan CSS text decoration berikut ini kami contohkan penggunaanya. Teks Berkedip, inherit, Line throught, text tanpa efek, overline, garis bawah.

Syntak untuk ditambahkan pada declaration:

?

1 2 3 4 5 6 7 8 9 10 11

text-decoration:blink;   text-decoration:inherit;   text-decoration:line-through;   text-decoration:none;   text-decoration:overline;   text-decoration:underline;

Text transform adalah CSS text yang digunakan untuk menentukan huruf besar dan huruf kecil dalam sebuah teks.

Hal ini dapat digunakan untuk mengubah segalanya menjadi huruf besar atau huruf kecil, atau memanfaatkan huruf pertama dari setiap kata.

?

1 2 3 4 5

p.uppercase {text-transform:uppercase;}   p.lowercase {text-transform:lowercase;}   p.capitalize {text-transform:capitalize;} Teks Identation digunakan untuk menentukan indentasi dari baris pertama dari teks. Yakni pada awal paragraf penulisan menjorok kekanan sesuai dengan besaran yang dikehendaki. ? 1 p {text-indent:50px;} Cukup jelas kan penjelasan tentang css text? Kalau kita tekun, belajar css itu mudah kok. Nah seri berikutnya kita lanjut ke font style