> CSS Teks

Kamis, 17 Maret 2011

2

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.
Ping your blog, website, or RSS feed for Free



Informasi Artikel :
Judul : "CSS Teks"
Diulas Oleh : | Kamis, 17 Maret 2011 | 21.46
Description : Beberapa fungsi fitur CSS teks atau disebut juga dengan format teks seperti warna teks, penempatan atau posisi teks mengunakan properti al...

Rating : 6.4 Dari 10, Berdasarkan 200+ Dari 2 000+ Pengunjung.



2 komentar:

  1. keteranganya membingungkan mas . . yang bling piye toh?

    BalasHapus
    Balasan
    1. Ichi Ichi Tactics..., saya rasa artikel ini sudah sangat jelas dan komplit. kode dan contoh yg saya berikan bekerja dengan baik...

      Mungkin maksud anda ingin membuat link dgn atribut "blink", langsung saja menggunakan HTML. Tapi sayang form koment ini tidak suport dengan teks HTML.

      Ya sdh sy beri gambaran seperti ini saja :

      =================================
      Tag awal Html link - tag awal "blink" - TEKS YG DIBUAT BLINK - tag akhir "blink" - Tag akhir Html link
      =================================

      Hapus

BLOGGER

TUTORIAL BLOGGER

TUTORIAL BLOGGER

REKOMENDASI

REKOMENDASI

Artikel Terbaru

POST POPULER

Entri Populer



BLOGGER

Comments

HTML

Side Ads

CSS

Footer Ads

JAVASCRIPT

Random News


BACKLINK

INFO

Bagi anda yang berminat tukar link, silahkan copy linknya lalu pasang di Blog anda. Dan bila sudah terpasang, jangan lupa beritahu saya, agar link anda segera saya pasang di Blog tercinta ini.

CEO
BLOG MAS NOER

Noer cholis


Plosokuning V, Minomartani, Ngaglik, Sleman, Yogyakarta.

TUKAR LINK

TUKAR LINK






Baca artikel "Manfaat Tukar Link"













Baca artikel "Manfaat Tukar Link"

LINK SAHABAT

LINK SAHABAT


CHAT

CHAT




TESTIMONI

Follow Us

Bila anda merasa artikel ataupun tutorial yang ada di Blog ini bermanfaat, anda bisa berikan suport comment melalui form ini. Form ini sangat bagus sebagai BACKLINK buat blog anda, silahkan tinggalkan link anda....

RECENT COMMENT

Recent Comments


top down