CSS Text

Beberapa fungsi fitur CSS teks atau disebut juga dengan format teks seperti warna teks, penempatan atau posisi teks mengunakan properti align, properti Dekorasi teks yang berfungsi untuk membuat dekorasi atau menghilangkan dekorasi seperti menghilangkan garis bawah pada link, Transformasi teks yang berfungsi untuk menentukan besar kecilnya huruf dalam teks, Identitas teks yang berfungsi untuk menentukan posisi teks baris pertama pada suatu paragraf.

Berikut ini contoh fungsi fitur css yang digunakan dalam pemformatan teks :

1. Warna Teks

<style type="text/css">
body {color:red;}
h1 {color:green;}
p.paragraf-kedua {color:blue;}
</style>

<h1>JUDUL BERWARNA HIJAU</h1>
<p>Keseluruhan teks pada halaman berwarna merah, hal ini ditentukan oleh pemilihan "body" sebagai warna keseluruhan teks pada suatu halaman, kecuali pada contoh paragraf yang kedua dengan teks berwana biru.</p>
<p class="paragraf-kedua">Pada paragraf yang kedua adalah contoh teks dengan warna biru.</p>
<p>Pada teks atau paragraf yang lain tetap berwana merah, sebab warna body sudah ditentukan diatas dengan warna merah.</p>

Berikut hasilnya :

Catatan :

• Pada dasarnya warna teks secara default adalah hitam. Dalam contoh diatas Warna dasar teks diberi warna merah, hal ini ditentukan oleh kata body atau body selector.

• Pemberian warna bisa menggunakan salah satu diantara :

* nama-nama warna, seperti "red"
* kode warna RGB, seperti "rgb (255,0,0)"
* kode warna hex, seperti "# FF0000"

2. Align Taks

<style type="text/css">
h1 {text-align:center;}
p.date {text-align:right;}
p.artikel{text-align:justify;}
</style>

<h1>PERGI TAMASYA (contoh)</h1>
<p class="date">1 Januari 2011</p>
<p class="artikel">Pada hari minggu kuturut ayah kekota, naik delman istimewa kududuk dimuka, disamping pak kusir yang sedang bekerja, sambil mengendarai kuda supaya baik jalannya, dug dig dag dig duk suara sepatu kuda..., indahnya kota jogja...</p>

Berikut hasilnya :

PERGI TAMASYA (contoh)

1 Januari 2011

Pada hari minggu kuturut ayah kekota, naik delman istimewa kududuk dimuka, disamping pak kusir yang sedang bekerja, sambil mengendarai kuda supaya baik jalannya, dug dig dag dig duk suara sepatu kuda..., indahnya kota jogja...

3. Dekorasi teks

Contoh membuat dekorasi teks :

<style type="text/css">
h1 {text-align:center;}
p.satu {text-decoration:overline;}
p.dua {text-decoration:line-through;}
p.tiga {text-decoration:underline;}

p.empat {text-decoration:blink;}

</style>

<h1>Judul (contoh)</h1>
<p class="satu">Ini contoh teks pertama overline</p>
<p class="dua">Ini contoh teks kedua line-through</p>
<p class="tiga">Ini contoh teks ketiga underline</p>
<p class="empat">Ini contoh teks keempat dg efek blink</p>

Berikut hasilnya :

Judul (contoh)

Ini contoh teks pertama overline
Ini contoh teks kedua line-through
Ini contoh teks ketiga underline
Ini contoh teks keempat dg efek blink

Catatan : Untuk dekorasi "blink" tidak suport pada browser IE, Chrome, dan Safari.

Contoh untuk menghilangkan garis bawah pada link :

<style type="text/css">
a {text-decoration:none;}
</style>

<p>Website ini memberikan panduan bagaimana <a href="http://www.carabuatwebgratis.com">Cara buat web</a> mudah, cepat, dan gratis</p>

Berikut hasilnya :

Website ini memberikan panduan bagaimana Cara buat web mudah, cepat, dan gratis

4. Transformasi teks

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

<p class="uppercase">Contoh membuat teks dengan huruf besar semua</p>
<p class="lowercase">Contoh membuat teks dengan huruf kecil semua</p>
<p class="capitalize">Contoh membuat teks dengan huruf besar hanya pada huruf pertama disetiap kata</p>

Berikut hasilnya :

Contoh membuat teks dengan huruf besar semua
Contoh membuat teks dengan huruf kecil semua
Contoh membuat teks dengan huruf besar hanya pada huruf pertama disetiap kata

5. Identitas teks

<style type="text/css">
p {text-indent:50px;}
</style>

<p>Contoh teks dengan properti "Identitas teks", memberikan efek pada teks baris pertama dalam paragraf lebih menjorok kedalam sesuai dengan besar kecilnya nilai "indent" yang telah ditentukan</p>

Berikut hasilnya :

           Contoh teks dengan properti "Identitas teks", memberikan efek pada teks baris pertama dalam paragraf lebih menjorok kedalam sesuai dengan besar kecilnya nilai "indent" yang telah ditentukan

Silahkan anda bisa coba otak atik sesuai selera anda.

Ok...., Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.