Menyajikan Cascading Style Sheet untuk
Memformat Tampilan Teks
\
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.
- 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 teksblok
- 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
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>
<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 warnateks biru.</p>
</body>
</html>
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>
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 {ttext-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 :
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>
<h22> Peregangan Header 2 sebesar 5 px</h2>
</BODY>
</HTML>
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) ataupuun 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
<h4> Header 4</h4>
</BODY>
</HTML>
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 {ttext-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 iniadalah 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>
<h22> Peregangan Header 2 sebesar 5 px</h2>
</BODY>
</HTML>
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) ataupuun 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
</BODY>
</HTML>
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.keciil {text-transform: lowercase}
p.kapital {text-transform: capitalize}
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}
</HEAD>
<BODY>
<p class="besar">
pengubahan menjadi huruf Besar (Kapital)
</p>
<p cllass="kecil">
PENGUBAHAN MENJADI HURUF KECIL</p>
<p class="kapital">
huruf kapital pada setiap awal kata
</p>
</BODpital">
huruf kapital pada setiap awal kata
</p>
</BODpital">
huruf kapital pada setiap awal kata
</p>
</BODY>
</HTML>
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>
<heaad>
<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>
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 {textalign: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>
0 komentar: