Agar lebih menarik, mudah dalam hal pengaturans serta editing, teks pada sebuah halaman web dapat diberikan sytle dalam kemasan CSS. Pengaturan style tersebut meliputi banyak properti, diantaranya adalah pewarnaan, pemilihan font, spasi dan lain sebagainya. Untuk lebih detailnya dapat dilihat pada tabel berikut ini.
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>
0 komentar: