pemprograman teks

4.  Kegiatan Belajar  4  : Menyajikan Cascading Style Sheet untuk    Memformat Tampilan Teks   a. Tujuan Pembelajaran.      Setelah mengikuti kegiatan belajar 4 diharapkan peserta didik dapat :
1) Memahami style-style dasar CSS untuk memformat tampilan teks 2) Menerapkan beberapa style untuk memformat tampilan teks. 3) Menyajikan CSS untuk memformat tampilan teks pada sebuah halaman web 
b. Uraian materi. 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 tersebutmisalnya "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> terkena style pewarnaan. 
Gambar 4.1 penerapan CSS warna teks