Ad Code

Menyajikan Cascading Style Sheet untuk Memformat Tampilan Teks

Reizky Rismawan 5/11/2017 11:38:00 PM
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
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>
Blok CSS
 


<style>
 body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>

</head>
<body>
<h1>ini adalah heading 1</h1>
 <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

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>
Bila listing kode diatas dijalankan akan menghasilkan tampilan seperti berikut,
Gambar  4.3 penerapan CSS untuk pengaturan dekorasi teks

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>
 </HTML>

Gambar 4.4 penerapan CSS untuk pemberian efek bayangan

5)  Pengaturan jarak indentasi paragraph/text-indent
Text-indent menentukan jarak inden dari baris pertama dalam teks-blok, sehingga teks pada baris pertama terlihat lebih menjorok kedalam dibanding teks pada baris yang lain.  Format penulisan untuk pengaturan jarak indentasi text adalah sebagai berikut :

 selector { text-indent:nilai indent}

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 {text-indent: 2cm }
</STYLE>
</HEAD>
<BODY>
<p>
Dengan text indent.
Form adalah salah satu bentuk halaman web yang digunakan  untuk menerima masukan dari pengguna,
untuk selanjutnya masukan dari pengguna tersebut diolah
menggunakan bahasa pemrograman web,
baik secara server side scripting(misalkan PHP, JSP) 
ataupun client-side scripting (javascript).
</p>
Tanpa text indent.
Form adalah salah satu bentuk halaman web yang digunakan  
 untuk menerima masukan dari pengguna,untuk selanjutnya  
 masukan dari pengguna tersebut diolah menggunakan bahasa  
 pemrograman web,baik secara server side scripting(misalkan  
 PHP, JSP)  ataupun client-side

Bila listing kode diatas dijalankan akan menghasilkan tampilan seperti berikut :

Gambar  4.5 penerapan CSS untuk pengaturan text indent






6)  Pengubahan huruf besar dan huruf kecil dari sebuah teks/text-
     transform
Teks-transform properti digunakan untuk menentukan huruf besar dan kecil dalam teks. Format penulisan CSS untuk pengaturan text indent adalah sebagai berikut :
 selector { text-transform:nilai text transform}

Nilai text transform dapat diisi dengan uppercase,lowercase, capital. Pada listing kode berikut terlihat CSS dituliskan dalam bentuk CLASS p.besar, p.kecil dan p.kapital. Hal ini bertujuan untuk memberikan pengaturan yang berbeda pada paragrafnya.

 <STYLE ="text/css">
     p.besar {text-transform: uppercase}
     p.kecil {text-transform: lowercase}
     p.kapital {text-transform: capitalize}
 </STYLE>

Berikut ini adalah contoh penerapan dari style tersebut :
 <HTML>
 <HEAD>
 <TITLE>Format Text </TITLE>
 <STYLE ="text/css">
     p.besar {text-transform: uppercase}
     p.kecil {text-transform: lowercase}
     p.kapital {text-transform: capitalize}
 </STYLE>
 </HEAD>
 <BODY>
 <p class="besar">
 pengubahan menjadi huruf Besar (Kapital)
 </p>
 <p class="kecil">
 PENGUBAHAN MENJADI HURUF KECIL
 </p>
 <p class="kapital">
 huruf kapital pada setiap awal kata
 </p>
 </BODY>
 </HTML>

Bila listing kode diatas dijalankan akan menghasilkan tampilan seperti berikut,
Gambar 4.6  penerapan CSS untuk pengaturan text-transform

7)  Pemberian efek bayangan pada teks/Text shadow
Text-shadow digunakan untuk memberikan efek bayang pada sebuah teks. Berikut adalah format penulisan CSS dengan text-shadow

 Selector { text-shadow: koordinatX koordinatY 
 nilaiWarnaTeksBayangan;}

Contoh :  penulisan text shadow
h1 { text-shadow: 2px 2px #ff0000; }

Berikut ini adalah contoh penerapan dari style tersebut :
 <!DOCTYPE html>
<html>
<head>
<style>
h1 {text-shadow:2px 3px #FF0000;}
</style>
</head>
<body>
<h1>Efek Text-shadow </h1>
<p><b>Catatan:</b>  Internet Explorer Versi 9 dan  
sebelumnya tidak support pada text-shadow property.</p>
</body>
</html>

Bila listing kode diatas dijalankan maka akan menghasilkan tampilan sebagai berikut :
Gambar 4.7 penerapan CSS untuk pemberian efek bayangan

8)  Pengaturan Text Alignment
Properti text-align digunakan untuk mengatur alignment horizontal teks. Teks  dapat ditulis rata kiri, rata kanan, rata kanan kiri ataupun ditulis center. Ketika text-align diset “justify", setiap baris memiliki lebar yang sama, dan margin kiri dan kanan lurus (seperti di majalah dan surat kabar). Format penulisan CSS untuk text alignment

 selector {text-align:nilai text-align;}

Berikut adalah contoh dari penulisan style text-align yang disisipkan di selector h1 dan paragraf.

h1 {text-align:center;}
p.tanggal {text-align:right;}
 p.utama {text-align:justify;}

pada selector p.tanggal dan p.utama artinya CSS akan diberikan ke paragraf dengan pemanggilan kelas “tanggal” dan “utama”. Untuk lebih lengkapnya dapat dilihat pada contoh berikut :

<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-align:center;}
p.tanggal {text-align:right;}
p.utama {text-align:justify;}
</style>
</head>
<body>
<h1>Contoh CSS text-align</h1>
<p class="tanggal">07 Desember 2013</p>
<p class="utama">Properti text-align digunakan untuk  
mengatur alignment horizontal teks.
Teks  dapat ditulis rata kiri, rata kanan, rata kanan
kiri ataupun ditulis center. Ketika text-align diset
“justify", setiap baris memiliki lebar yang sama, dan
margin kiri dan kanan lurus (seperti di majalah dan surat
kabar).
Format penulisan CSS untuk text alignment.selector {text-
align:nilai text-align;}
Berikut adalah contoh dari penulisan style text-align
yang disisipkan di selector h1 dan paragraf.
h1 {text-align:center;}
p.tanggal {text-align:right;}
p.utama {text-align:justify;}
pada selector p.tanggal dan p.utama artinya CSS akan
diberikan ke paragraf dengan pemanggilan kelas “tanggal”
dan “utama”. Untuk lebih lengkapnya dapat dilihat pada
contoh berikut :</p>
 <p><b>Catatan:</b> Baris ini adalah contoh penulisan tanpa   
 CSS</p>
 </body>

 </html>

Post a Comment

0 Comments

Close Menu