CSS Teks

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.

Judul: CSS Teks; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts

• CSS Border-RadiusFungsi Properti css border - radius memudahkan kita merubah sudut pada sebuah box atau kotak menjadi tumpul atau melengkung. Bahkan dengan properti css border - rad ... readmore
• CSS Gradient background GeneratorPada posting sebelumnya saya membahas tenntang CSS3 Generator, dan kali ini saya akan membahas tentang CSS Gradient Background Generator (Warna Gradient) yaitu sebu ... readmore
• Cara membuat tanggal otomatis updateMasih dalam kategori css dan javascript, kali ini kita akan belajar membuat dan memasang tanggal otomatis update setiap saat yang bisa kita pasang pada web ataupun ... readmore
• Cara membuat efek membesar pada gambarMemberikan efek membesar pada gambar adalah salah satu cara menjadikan web atau blog tampil menarik. Biasanya digunakan pada web atau blog yang banyak menampilkan g ... readmore
• Cara membuat efek shadow pada kotak dan gambar Penggunaan css3 memang menajubkan. Css3 merupakan pengembangan dari css 1 dan css 2. Keunggulan CSS3 memiliki banyak fitur. seperti shadow, transparansi, gradiasi ... readmore