text dalam format CSS

Sesuai dengan namanya, property text-decoration digunakan untuk mempercantik text halaman HTML kita.
Cara penulisan

p {text-decoration: overline}

Nilai (value) text-decoration ada 5 macam yaitu:
overline - untuk membuat tulisan dengan dekorasi garis diatasnya
line-through - untuk membuat tulisan dengan dekorasi garis ditengahnya
underline - untuk membuat tulisan dengan dekorasi garis bawah
blink - untuk membuat tulisan berkedip
none - untuk membuat tulisan tanpa dekorasi

Untuk lebih jelasnya kita coba aja yaa

<html>
<head>
<style type="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration: blink}
a {text-decoration: none}
</style>
</head>

<body>
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<p><a href="http://4gratisfree.blogspot.com/">Sebuah link</a></p>
</body>

</html>

Contoh Tampilan dalam Browser

Header 1

Header 2

Header 3

Header 4

Sebuah link

Dalam contoh diatas, sebuah link yang biasanya selalu disertai garis bawah bisa kita buat tanpa garis bawah.
Nah.. udah deh, sekarang kita bisa mempercantik halaman HTML kita dengan text-decoration. Tapi bisa juga memperjelek yaa, coba kalau semua tulisan di over-through.....

Property text-transform

Dalam menulis halaman HTML, seringkali kita pengen membuat suatu tulisan dengan huruf besar semua atau dengan huruf kecil semua, tetapi kita sering kali lupa menekan tombol Caps Lock sehingga tulisan kita mesti dihapus dulu baru ditulis ulang sesuai keinginan. Sebenarnya ada suatu property yang memudahkan kita untuk keperluan tersebut yaitu property text-transform.

Dengan property ini kita bisa membuat tulisan dengan huruf Kapital semua, huruf kecil semua atau setiap kata diawali dengan huruf kapital tanpa takut salah ketik. Karena secara otomatis browser akan mengikuti perintah CSS kita sesuai dengan keinginan kita.

Contoh pemakaian text-transform

<html>
<head>
<style type="text/css">
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}
</style>
</head>

<body>
<p class="uppercase">Paragrap ini ditulis dengan huruf kapital</p>

<p class="lowercase">Paragrap ini DITULIS dengan huruf kecil semua</p>

<p class="capitalize">Setiap kata diawali huruf kapital</p>
</body>

</html>

Dalam contoh diatas, ketiga contoh paragrap sengaja ditulis dengan huruf besar dan kecil campur aduk. Kesengajaan ini hanya untuk melihat fungsi text-transform yang sebenarnya.
Tampilan Browser

Paragrap ini ditulis dengan huruf kapital

Paragrap ini DITULIS dengan huruf kecil semua

Setiap kata diawali huruf kapital

Selamat Mencoba...