Properti Keterangan
Color Mengatur warna dari teks
Direction Menentukan arah tulisan/teks
letter-spacing Menambah ataupun mengurangi spasi antar karakter dalam teks
line-height Mengatur tinggi baris teks
text-align Menentukan batas teks secara horisontal
text- decoration
Menentukan dekorasi/hiasan pada teks
text-indent Menentukan jarak inden dari baris pertama dalam teks- blok
text-shadow Menentukan efek bayangan pada teks
text- transform
Mengatur huruf besar-huruf kecil dari teks
Pemrograman Web
Page | 59
unicode-bidi Untuk mengeset unicode
vertical-align Menentukan batas teks secara horisontal
white-space Menentukan penulisan white-space pada elemen
word-spacing Menambah ataupun mengurangi spasi antar kata dalam teks
1) Pengaturan warna pada teks/color CSS dapat terapkan untuk mengatur warna dari teks. Pengaturan warna teks dengan CSS dapat menggunakan nilai warna sebagai berikut : nilai HEX misalnya, "#ff0000" nilai RGB misalnya, "rgb(255,0,0)" nama dari warna tersebutmisalnya "red" Format penulisan untuk pemberian warna pada text menggunakan CSS adalah sebagai berikut :
selector {color:nilai warna}
Berikut adalah contoh penulisan warna pada teks yang dituliskan secara embeded
<!DOCTYPE html> <html> <head>
<style> body {color:red;} h1 {color:#00ff00;} p.ex {color:rgb(0,0,255);} </style>
</head> <body> <h1>ini adalah heading 1</h1>
Blok CSS
Pemrograman Web
Page | 60
<p>ini adalah paragraph, ditulis dengan warna merah. Default text-color didefinisakan pada body selector.</p> <p class="ex">ini adalah paragraph with class="ex". dan warna teks biru.</p> </body> </html> Bila listing kode diatas dijalankan akan menghasilkan tampilan seperti berikut, secara otomatis ketika terdapat teks pada tag <body., <h1> dan <p>
2) Pengaturan spasi antar karakterf/letter-spacing Salah satu style dari CSS adalah letter-spacing yang dapat digunakan untuk memberikan jarak (spasi) antar karakter atau huruf. Format penulisan CSS untuk pengaturan jarak (spasi) antar karakter atau huruf adalah sebagai berikut :
selector { letter-spacing:nilai spasi;}
Besarnya nilai spasi dapat ditentukan dalam satuan cm maupun px. Berikut ini adalah contoh penerapan dari style tersebut :
<HTML> <HEAD> <TITLE>Format Text </TITLE> <STYLE ="text/css">
p {letter-spacing: 0.5cm} h4 {letter-spacing: -2px} </STYLE> </HEAD> <BODY> <p>Pengaturan Spasi Pada Paragraph</p> <h4> Header 4</h4> </BODY> </HTML>
Bila listing kode diatas dijalankan akan menghasilkan tampilan seperti berikut,
Gambar 4.2 penerapan CSS untuk pengaturan spasi pada paragraf teks
3) Pengaturan bentuk-bentuk teks/decoration Pengaturan bentuk teks menggunakan properti text-decoration bertujuan untuk mengatur atau menghapus dekorasi dari teks. Format penulisan CSS untuk mengaturan dekorasi teks adalah sebagai berikut : selector {text-decoration : nilai text-decoration } Nilai dari text-decoration dapat berupa overline, line-through, underline dan none yang berarti tanpa dekorasi . Berikut ini adalah contoh penerapan dari style tersebut : <HTML> <HEAD> <TITLE>Format Text </TITLE> <STYLE ="text/css"> em {text-decoration : overline} h2 {text-decoration: line-through} h3 {text-decoration: underline} a {text-decoration: none} </STYLE>
</HEAD> <BODY> <em>Bentuk Overline</em> <h2>Header 2, Bentuk Line-through</h2> <h3>Header 3,Bentuk Underline</h3> <p><a href="http://www.bem.akakom.ac.id"> Penggunaan Dalam Link,Nilai NONE</a></p> </BODY> </HTML>
4) Pengaturan spasi antar kata/word-spacing Salah satu style dari CSS adalah word-spacing yang dapat digunakan untuk memberikan jarak (spasi) antar kata. Format penulisan CSS untuk pengaturan jarak (spasi) antar karakter atau huruf adalah sebagai berikut :
selector { word-spacing:nilai spasi;}
Besarnya nilai spasi dapat ditentukan dalam satuan cm maupun px. Berikut ini adalah contoh penerapan dari style tersebut : Bila listing kode diatas dijalankan akan menghasilkan tampilan seperti berikut,
<HTML>
<HEAD>
<TITLE>Format Text </TITLE>
<STYLE ="text/css">
p {word-spacing: 1cm}
h2 {word-spacing: 5px}
</STYLE>
</HEAD>
<BODY>
<p>Pengaturan Spasi per Kata sebesar 1 cm</p>
<h2> Peregangan Header 2 sebesar 5 px</h2>
</BODY>
