BAB II

Cascading Style Sheet (CSS)
2.1 Pengertian CSS
Cascading Style Sheet (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan dokumen yang ditulis dalam format (X)HTM L, XM L, SVG maupun XUL. Dengan menggunakan CSS, tampilan dari dokumen tersebut akan lebih menarik dan hanya membutuhkan satu kali pendefinisian. Jadi akan sangat menghemat waktu dalam mendesain tampilan aplikasi berbasis web. Tampilan yang dapat diatur dalam CSS meliputi text, warna, tata letak, background, visible/invisible, dll.

2.2 Aturan CSS
Seperti bahasa pada umumnya, CSS juga memiliki aturan dalam menuliskannya. Adapun aturan tersebut adalah : Terdiri atas selector (berupa nama tag dokumen markup) dan declaration (berupa attribute beserta nilainya). M isalnya : h1 {color : red;}. Penulisan CSS dapat dilakukan pada file lain atau di dalam dokumen markup.

Jika ditulis pada dokumen markup dan inline : 1. M enggunakan attribute style :
<h1 style=”color:blue” />

Jika ditulis pada dokumen markup tetapi tidak inline (embedded) : 2. 3. Diletakkan pada tag Diawali dengan tag
<head> ... </head> <style> [kode ditulis di sini] </style>

Jika ditulis pada file lain (*.css): 25

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

1. 2.

Diletakkan pada tag M enulis embed

<head> ... </head>

file

stylesheet

<link

rel=”stylesheet”

href=”style.css” />

Tips : Untuk lebih efektif dan efisien, penulisan stylesheet sebaiknya menggunakan aturan yang ke tiga, yaitu dengan cara embed. Karena memiliki beberapa kelebihan, yaitu : 1. 2. 3. 4. Tidak memerlukan pendefinisian yang memperkecil terjandinya redundansi style. berulang-ulang sehingga

Global style, jika terjadi perubahan, maka hanya 1 file yang diganti, bukan tiap-tiap dokumen markup Dokumentasi dan pemeliharaan yang lebih mudah. Dalam menulis stylesheet disarankan untuk menggunakan tools macromedia dreamweaver, karena setiap declaration akan otomatis suggest.

Selector yang dikenali oleh CSS adalah HTM L, ID dan CLASS. Untuk selector ID, dapat digunakan pada semua element HTM L dengan menuliskan attribute ID pada elemen HTM L tersebut dan menambahkan karakter “#” pada dokumen CSS. Sedangkan untuk selector CLASS, dengan menambahkan karakter “.” Pada dokumen CSS dan pada elemen HTM L menambahkan attribute class. HTML
<div>Isi Text</div> div{ color:yellow; text-align:center; }

S elector ID
<div id=’text’>Isi Text</div> #text { color:red; text-align:center; }

S elector Class
<div class=’text’>Isi Text</div> .text { color:blue; text-align:right; }

2.3 Box Modeling 2.3.1 Box Modeling
Berfungsi untuk menentukan margin, border, ukuran, spasi dan padding dari suatu desain layout. 26

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

Keterangan dari masing – masing bagian : Margin : mengatur jarak suatu area dengan batas terluar dari garis dan tidak terdapat property background. Border : batas area yang dapat ditentukan warna dan ketebalannya. Padding : mengatur jarak content dengan batas terdalam dari area dan tidak terdapat property background Content : isi dari suatu layout (dapat berupa text, gambar, animasi) dan terdapat property background Contoh berikut untuk membuat sebuah kotak di halaman web:
Nama File : box.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html> <head> <title> Box Modelling </title> <style> .box { width:300px; margin:10px; border:5px #332930 solid; padding:10px; text-align:center; </style>

27

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

15 16 17 18

</head> <body> <div class="box"> Box Modeling CSS</div> </body> </html>

Akan menampilkan kotak dengan lebar 300px (width:300px) dengan batas terluar kotak adalah 10px (margin:10px) dan batas antara kotak dan text di dalamnya adalah 10px (padding:10px) lebar border 5px (border:5px) dan teks akan ditampilkan center (text-align:center) Berikut tampilan dari baris kode di atas :
Ket

Gambar 2.1 Box Model

CATATAN : Pada beberapa kasus, hasil tampilan web dengan CSS tidak sesuai dengan yang sudah didefinisikan. M isalnya di browser Internet Explorer, lebar dari kotak di atas tidak sepenuhnya 300px, karena Internet Explorer membutuhkan tag :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht tp :/ /w ww .w 3. or g/ TR /x ht ml 1/ DT D/ xh tm l1 -t ra ns it ion al .d td ">

Jika tag di atas tidak didefinisikan, Internet Explorer akan menyatukan antara padding dan border ke dalam property width. Dan hal ini kemungkinan berlaku untuk elemen – elemen yang lain. Jadi setiap membuat dokumen yang mengandung CSS, agar lebih mudah diakses secara lintas browser ada baiknya selalu menambahkan tag di atas.

28

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

2.3.2 Border
Berfungsi untuk mengatur tampilan border suatu elemen web. Syntax :
border-style : solid; border-color:blue; etc

Nilai yang dapat diberikan pada property border adalah : Nilai None Solid Dotted Dashed Double Keterangan

Tidak ada border Border solid Border titik – titik Border garis – garis putus Border ganda, mempunyai ketebalan yang sama jika diberi tambahan nilai width Groove Border 3D groove, efek dari nilai adalah tergantung dari warna border Ridge Border 3D ridge, efek dari nilai adalah tergantung dari warna border Inset Border 3D inset, efek dari nilai adalah tergantung dari warna border Outset Border 3D outset, efek dari nilai adalah tergantung dari warna border Width M engatur tebal dari border Berikut contoh penggunaan border
Nama File : border.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 transitional.dtd"> <html> <head> <title> Border </title> <style> .none { width:300px; border-style:none; margin:10px; text-align:center; } .solid { width:300px; border -color:blue; border-width:1px; border-style:solid; margin:10px; text align:center; } .do tt ed { wid th :3 00p x; b ord er -c olo r: blu e; border-width:1px; border-style:dotted; margin:10px; textalign:center; }

29

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

.dashed border-wid th:1px; align:center; } .double border-wid th:5px; align:center; } .groove border-wid th:5px; align:center; } .ridge border-wid th:5px; align:center; } .inset border-wid th:5px; align:center; } .outset border-wid th:5px; align:center; } </style> </head>

{

width:300px; border-color:blue; border-style:dashed; margin:10px; textwidth:300px; border-color:blue; border-style:double; margin:10px; text-

{

{

width:300px; border-color:blue; border-style:groove; margin:10px; textwidth:300px; border-color:blue; border-style:ridge; margin:10px; text-

{

{

width:300px; border-color:blue; border-style:inset; margin:10px; text-

{

width:300px; border-color:blue; border-style:outset; margin:10px; text-

<body> <div class="none"> Border None </div> <div class="solid"> Border Solid </div> <div class="dotted"> Border Dotted </div> <div class="dashed"> Border Dashed </div> <div class="double"> Border Double </div> <div class="groove"> Border Groove </div> <div class="ridge"> Border Ridge </div> <div class="inset"> Border Inset </div> <div class="outset"> Border Outset </div> </body> </html>

30

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

Hasil dari baris kode di atas adalah :

Gambar 2.2 Border Property

Untuk jenis border, dapat didefinisikan per sisi (top, bottom, left dan right). M isal, untuk top menggunakan solid, bottom dotted, left dashed dan right double. M aka untuk menuliskannya adalah sebagai berikut :
.border-campur { width:300px; border-width:5px; border-top-style:solid; border-bottom-style:dotted; border-left-style:dashed; border-right-style:double;}

2.3.3 Outline
Berfungsi untuk memberikan ornament sisi terluar pada elemen dokumen markup. Letaknya setelah border.

31

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

Nama File : outline.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html> <head> <style type="text/css"> p { width:300px; border:1px solid red; outline:blue dotted thick; } </style> </head> <body> <p>Ini adalah contoh outline</p> </body> </html>

Hasil tampilan dari baris kode di atas adalah :

Gambar 2.3 Outline layout

2.3.4 Margin
Berfungsi untuk memberikan jarak antar elemen pada dokumen markup. Dapat didefinisikan per bagian atau cukup dengan satu baris. Berikut pendefinisian margin. 32

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

Definisi per sisi
mar gi n- to p: 10 0p x; margin-bottom:100px; margin-right:50px; mar gi n- le ft :5 0p x;

Definisi shortcut
mar gi n:2 5p x 5 0p x 75p x 10 0px ;

left margin : 100px margin:25px 50px 75px; o top margin : 25px m ar gi n : 75 px margin:25px 50px; right dan le ft margin : 50px margin:25px; o semua sisi margin : 25px

o o o o

top margin : 25px right margin : 50px b ot tom m ar gi n : 75 px

o right dan o b ot tom

left margin : 50px

o o

top dan bott om margin : 25px

Satuan nilai margin dapat berupa px, pt, em dan % (missal 5px, 10pt, 5em atau 10%)

2.3.5 Padding
Berfungsi untuk memberikan jarak antara elemen dengan content yang ada di dalamnya. Berikut pendefinisian padding : Definisi per sisi
padding-top:100px; padd in g-b ott om :10 0px ; padding-right:50px; padding-left:50px;

Definisi shortcut
padd ing :25p x 5 0px 75 px 100p x;

left padding: 100px pad di ng: 25 px 5 0px 7 5p x;

o o o o

top padding: 25px right padding: 50px b ot to m p ad di ng : 75 p x

o top padding: 25px o right dan le ft padding: 50px o b ot to m p ad di ng : 75 p x
padding:25px 50px; right dan le ft padding: 50px padding:25px;

o o

top dan bott om padding: 25px

o semua sisi padding: 25px Sama dengan margin, satuan nilai dari padding pun dapat berupa px, pt, em, dan % 33

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

2.4 Styling
M erupakan bagian dari CSS yang berfungsi untuk mengatur background, text/font, link, list dan table agar menjadi lebih menarik dan cantik. Dengan menambahkan background serta mengeset font dari suatu tampilan website, maka akan lebih memberikan daya tarik kepada web tersebut.

2.4.1 Background
Berfungsi untuk mengatur background dari elemen dalam dokumen markup. Background dapat berupa warna ataupun gambar. Property yang biasa digunakan untuk mengatur background adalah : 
background-color

 background-image  background-repeat  background-attachment  background-position untuk background-color dapat menggunakan satuan nilai sebagai berikut :   
nama warna, ex : "red" RGB – nilai RGB, ex : "rgb(255,0,0)" Hex – nilai hexadesimal, ex : "#ff0000"

Dalam mendefinisikan background sebaiknya mengikuti aturan pewarnaan yang sudah distandarkan, baik itu menggunakan background-color atau background-image yaitu : Paduan warna terbaik menurut disiplin IM K (Interaksi M anusia dan Komputer) Latar Belakang Putih Hitam M erah Hijau Biru 34 Garis Tipis dan Teks Biru Hitam M erah Putih Kuning Kuning Putih Hitam Hitam Biru M erah Putih Kuning Cyan Garis Tebal dan Teks Hitam Biru M erah Kuning Putih Hijau Hitam Kuning Putih Cyan Hitam M erah Biru Kuning M agenta Hitam Cyan Putih

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

Cyan Biru Hitam M erah M erah Biru Hitam M agenta M agenta Hitam Putih Biru Biru Hitam Kuning Kuning M erah Biru Hitam M erah Biru Hitam Paduan warna terburuk menurut disiplin IM K (Interaksi M anusia dan Komputer) Latar Belakang Putih Hitam M erah Garis Tipis dan Teks Garis Tebal dan Teks Kuning Cyan Kuning Cyan Biru M erah M agenta Biru M agenta M agenta Hijau Biru M agenta Hijau Biru Cyan Cyan Hijau Cyan M agenta Kuning Cyan M agenta Kuning Biru Hijau M erah Hitam Hijau M erah Hitam Cyan Hitam Kuning Putih Kuning Hijau Putih M agenta Hijau M erah Cyan Cyan Hijau M erah Kuning Putih Cyan Putih Cyan Hijau Sedangkan dalam mendefinisikan background-image yang mengandung gambar gradasi warna agar lebih baik tampilannya bisa menggunakan tambahan pengaturan background-repeat vertical ataupun horizontal. Berikut contoh penggunaan background dalam sebuah dokumen markup.
Nama File : backgound.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html> <head> <style type="text/css"> body { background -color: #fa8292 ; /* re turn pi nk col or */ background-image: url('diar.png'); background-repeat: no-repeat; background-position:right top; } </style> </head> <body> <h1>Selamat Datang,</h1> <p>Ini adalah ha laman web y ang mencoba menggunakan background warna</p> <p>bukan hanya warna tapi juga gambar dijadikan background dalam web ini</p> <p>untuk gambar, diletakkan pada posisi kanan dan top dari

35

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

23 24

web ini dan cukup ditampilkan 1 kali</p> </body> </html>

Akan menampilkan halaman web dengan backgrodund gambar (diar.png) dan akan tiampilkan 1 kali sesuai dengan ukurannya terletak di pojok kanan atas. Hasil dari baris kode di atas jika diakses dengan web browser adalah :
Ket

Gambar 2.4 Gabungan background warna dan gambar

Contoh background image gradasi yang kurang menarik.
Nama File : background_2.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html> <head> <style type="text/css"> body { background-color:white; bac kg ro un d- im ag e: u rl (' gr ad ie n. jp g' ); } </style> </head> <body> <h1>Selamat Datang,</h1> <p>Ini adalah halaman web yang mencoba menggunak an

36

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

18 19 20 21

background warna</p> <p>bukan hanya warna tapi juga gambar dijadikan background dalam web ini</p> </body> </html>

Ket

Akan menampilkan halaman web dengan background gradient.jpg dan akan diulang seluas halaman web yang dibuka.

Dari baris kode di atas, tampilan di web browsernya adalah :

Gambar 2.5 Background gradient yang buruk

Dan berikut contoh background gradient yang lebih menarik .
Nama File : background_3.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html> <head> <style type="text/css"> body { background-color:white; bac kg ro un d- im ag e: u rl (' gr ad ie n. jp g' ); background-repeat: repeat-x; } </style> </head>

37

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

15 16 17 18 19 20 21 22

<body> <h1>Selamat Datang,</h1> <p>Ini adalah ha laman web y ang mencoba menggunakan background warna</p> <p>bukan hanya warna tapi juga gambar dijadikan background dalam web ini</p> </body> </html>

Akan menampilkan halaman website yang mengandung background gradient.jpg dan akan ditampilkan repeat berdasarkan sumbu x. Terlihat lebih baik dari yang sebelumnya Hasil dari baris kode di atas jika diakses dengan web browser adalah
Ket

Gambar 2.6 background gradient yang lebih baik

Sedangkan berikut ini contoh background yang letaknya “fix”. Jika halaman website discroll maka background image tetap pada posisinya (tidak bergeser).
Nama File : background_4.html 1 2 3 4 5 6 7 8 9 10 <html> <head> <style type="text/css"> body { margin-left:300px; background:#5d9ab2 url('diar.png') no -repeat top left fixed; } .container

38

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

{ text-align:center; } .center_div { border:1px solid gray; margin-left:auto; margin-right:auto; width:90%; background-color:#d0f0f6; text-align:left; padding:8px; } </style> </head> <body> <div class="container"> <div class="center_div"> <h1>Selamat Datang</h1> <p>Ini adalah web dengan background image dan warna</p> <p>background image position fixed</p> <p>ketika halaman di scr oll, ga mbar ti dak be rubah posisi</p> <p>coba geser scroll ke bawah</p> <p>yang bergeser hanya kotak teksnya...</p> </div> </div> </body> </html>

Ket

Akan menampilkan halaman web dengan bagkground diar.png yang letaknya tidak bergeser sekalipun scroll ditarik kebawah.

39

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

Hasil dari baris kode di atas:

Gambar 2.7 Background posisi fixed

2.4.2 Text
Berfungsi untuk mengatur text dokumen markup. Pengaturan yang bisa dilakukan adalah: a. Warna text

Berfungsi untuk mengatur warna dari text. Nilai yang bisa diberikan adalah dalam bentuk   
nama warna, ex : "red" RGB – nilai RGB, ex : "rgb(255,0,0)" Hex – nilai hexadesimal, ex : "#ff0000"

40

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

M isal :
body {color:blue;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);}

b.

Alignment

Berfungsi untuk mengatur alignment text secara horizontal. Sama dengan pengaturan alignment text di dokumen office (word, excel, etc). M isal :
h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;}

c.

Dekorasi text bisa berupa garis

Berfungsi untuk memberikan hiasan text, atas/tengah/bawah, cetak tebal/miring dan berkedip. M isal :
h1 h2 h3 h4

{text-decoration:overline;} / * garis atas */ {text-decoration:line-through;} /* garis tengah */ {text-decoration:underline;} /* garis bawah */ {text-decoration:blink;} /* berkedip */

d.

Transformasi

Berfungsi untuk mengatur besar kecilnya text (uppercase, lowercase atau capitalize) M isal :
p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;}

e.

Inden text

Berfungsi untuk mengatur alenia text M isal : f.
p {text-indent:50px;}

S pasi antar karakter

Berfungsi untuk mengatur jarak antar karakter. M isal :
h1 {letter-spacing:2px;} h2 {letter-spacing:-3px;}

41

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

g.

S pasi antar baris

Berfungsi untuk mengatur jarak antar baris text 1 dan 2 atau seterusnya. M isal : h.
p.small {line-height:90%;} p.big {line-height:200%;}

Letak text (direksi)

Berfungsi untuk mengatur direksi dari text, left atau right M isal : i.
div.ex1 {direction:rtl;}

S pasi antar kata

Berfungsi untuk mengatur jarak antar kata. M isal : j.
p{ word-spacing:30px;}

Menghilangkan wrap text

Berfungsi untuk menghilangkan wrapping text M isal : k.
p{white-space:nowrap;}

Vertical alignment gambar

Berfungsi untuk mengatur vertical alignment text jika disisipi gambar antar kata. M isal :
img.top {vertical-align:text-top;} img.bottom {vertical-align:text-bottom;}

Berikut contoh untuk semua pengaturan text.
Nama File : text.html 1 2 3 4 5 6 7 8 9 10 11 12 <html> <head> <style type="text/css"> .warna1 { color:blue; } .warna2 { color:#348203; } .rata_tengah { text-align:center; } .garis_atas {text-decoration:overline;} /* garis atas */ .garis_tengah {text-decoration:line-through;} /* garis tengah */ .garis_bawah {text-decoration:underline;} /* garis bawah */ .ked ip {t ext -d eco rat ion :b lin k;} / * b erk edi p */ .uppercase {text-transform:uppercase;}

42

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

.lowercase {text-transform:lowercase;} .capitalize {text-transform:capitalize;} .alenia {text-indent:50px;} .longgar {letter-spacing:5px;} .rempet {letter-spacing:-1px;} .spasi1 {line-height:90%;} .spasi2 {line-height:200%;} .direksi {direction:rtl;} .spasi3 { word-spacing:30px;} .wrap {white-space:nowrap;} .top {vertical-align:text-top;} .bottom {vertical-align:text-bottom;} </style> </head> <body> <div class="container"> <div class="center_div"> <h3>Text Color</h3> <div class="warna1">Ini warna biru</div> <div class="warna2">Ini warna dengan hexadesimal</div> <h3>Text Alignment</h3> <div class="rata_tengah">Ini rata tengah</div> <h3>Text Decoration</h3> <div class="garis_atas">Garis di atas tulisan</div> <di v cl as s= "g ar is _t en ga h" >G ar is d i te ng ah t ul is an< /d iv > <div class="garis_bawah">Garis di bawah tulisan</div> <div class="kedip">Text berkedip</div> <h3>Text Transformation</h3> <div class="uppercase">tulisan akan menjadi upppercase</div> <div class="lowercase">TULISAN AKAN MENJADI LOWER CASE</div> <div class="capitalize">tulisan akan menjadi uppercase di setiap awal kata</div> <h3>Text Inden</h3> <div class="alenia">Ini akan menjadi alenia. karena syarat alenia adalah di awal paragraph menjorok ke dalam sehingga dinamakan sebagai alenia</div> <h3>Text Spasi Character</h3> <div class="longgar">tulisan akan terlihat lebih berjarak</div> <div class="rempet">tulisan akan terlihat lebih berhimpit</div> <h3>Text Spasi Baris</h3> <di v c las s= "sp asi 1" >ja rak a nta ra ba ris pe rt ama da n ked ua begitu dekat, lihat saja kalau tidak percaya</div> <di v c las s= "sa psi 2" >ja rak a nta ra ba ris pe rt ama da n ked ua begitu jauh, lihat saja kalau tidak percaya</div> <h3>Text Direction</h3>

43

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83

<div class="direksi">tulisan akan berada di sisi kanan jendela</div> <h3>Text Word Spacing</h3> <div class="spasi3">jarak tiap kata akan sedikit lebih jauh</div> <h3>Text NoWrap</h3> <div class="wrap">tulian ini akan menjadi panjang sekali. dan t id ak d i wr ap a li as a ka n ti mb ul s cr oo ll h or iso nt al . tulian ini akan menjadi panjang sekali. dan tidak di wrap alias akan timbul scrooll horisontal. tulian ini akan menjadi panjang sekali. dan tidak di wrap alias akan timbul scrooll horisontal. tulian ini akan menjadi panjang sekali. dan tidak di wrap alias akan timbul scrooll horisontal</div> <h3>Text Vertical Image</h3> <div>teks ini akan disisipi <img src="juwed_logo.jpg" class="top"> dan tulisan akan di atas</div> <div>teks ini akan disisipi <img src="juwed_logo.jpg" class="bottom"> dan tulisan akan di bawah</div> </body> </html>

Hasil dari baris kode di atas ditampilkan dalam 4 gambar di bawah ini :

Gambar 2.8a. Text color – Text decoration

44

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

Gambar 2.8b. Text transformation – Text spasi character

45

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

Gambar 2.8c. Text Spasi Baris – Text nowrap

46

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

Gambar 2.8d Text nowrap – Text image

2.4.3 Font
Untuk mengatur jenis, ketebalan, ukuran dan style font pada sebuah dokumen markup. Dalam CSS terdapat dua tipe yang mendasari jenis font : Generic family, meliputi jenis font yang sejenis dengan serif atau monospace Font family, meliputi jenis font yang sejenis dengan times new roman atau arial 47

-

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

Generic family Serif Sans-serif

Font family Times New Roman Georgia

Keterangan M emiliki garis tambahan di ujung huruf Tidak memiliki garis tambahan di ujung huruf M emiliki ukuran yang sama untuk setiap huruf

Arial Verdana Courier New M onospace Lucida Console a. Font family

Berfungsi untuk memilih jenis font berdasarkan table di atas, bahwa untuk Times New Roman dan Georgia masuk ke dalam kelompok Serif, sedangkan arial dan verdana masuk ke dalam kelompok sans-serif dan couriew new dan lucida console masuk ke dalam kelompok monospace. Untuk menuliskannya, dapat ditulis secara terurut dari font yang ingin dipakai terlebih dahulu baru kemudian diikuti dengan font yang lain yang sejenis. Hal ini diperlukan untuk mengantisipasi apabila browser tidak support terhadap font yang dimaksudkan. M isal : b.
p{font-family:"Times New Roman", Times, serif;}

Font style

Berfungsi untuk mengatur style font, apakah normal, italic dan oblique.
p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;}

c.

Font size

Berfungsi untuk mengatur ukuran font. Satuan nilai dari ukuran font dapat berupa px, em dan %. Secara default ukuran font dokumen markup adalah 16px, jika dijadikan satuan em, maka sama dengan 1em (16px = 1em = default). Untuk beberapa kasus, jika menggunakan satuan px, tidak dapat ditampilkan dengan baik oleh browser Internet Explorer kecuali menggunakan satuan em. Semua browser mendukung satuan em ini, bahkan direkomendasikan oleh W3C. Untuk mengkonfersi dari satuan px ke em, dapat menggunakan rumus berikut : font size = px/16

48

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

M isal :
h1 {font-size:2.5em;} /* 40px/16=2.5em */ h2 {font-size:1.875em;} /* 30px/16=1.875em */ p {font-size:0.875em;} /* 14px/16=0.875em */

d.

Boldness

Berfungsi untuk mengatur ketebalan font. M isal :
p.normal {font-weight:normal;} p.light {font-weight:lighter;} p.thick {font-weight:bold;} p.thicker {font-weight:900;}

e.

Variant

Berfungsi untuk mengatur variasi font yang digunakan. M isal :
p.normal {font-variant:normal;} p.small {font-variant:small-caps;}

Berikut contoh penggunaan masing – masing pengaturan font.
Nama File : font.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <html> <head> <style type="text/css"> div.serif{font-family:"Times New Roman",Times,serif;} div.sansserif{font-family:Arial,Helvetica,sans -serif;} div.normal {font-style:normal;} div.italic {font-style:italic;} div.oblique {font-style:oblique;} .besar {font-size:1.5em;} .medium {font-size:0.875em;} .kecil {font-size:0.6em;} div.normal {font-weight:normal;} div.light {font-weight:lighter;} div.thick {font-weight:bold;} div.thicker {font-weight:900;}

49

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

div.default {font-variant:normal;} div.small {font-variant:small-caps;} </style> </head> <body> <h4>CSS font-family</h4> <div class="serif">Tulisan dengan font Time New Roman</div> <div class="sansserif">Tulisan dengan font Arial</div> <h4>CSS font-style</h4> <div class="normal">Tulisan dengan style normal</div> <div class="italic">Tulisan dengan style italic</div> <di v cl as s= "o bl iq ue "> Tu li sa n de ng an s ty le o bl iq ue< /d iv > <h4>CSS font-size</h4> <div class="besar">Tulisan dengan ukuran besar</div> <div class="medium">Tulisan dengan ukuran medium</div> <div class="kecil">Tulisan dengan ukuran kecil</div> <h4>CSS font-weight</h4> <div class="normal">Tulisan dengan ketebalan normal</div> <div class="light">Tulisan dengan ketebalan lighter</div> <div class="thick">Tulisan dengan ketebalan bold</div> <di v cl as s= "t hi ck er "> Tu li sa n de ng an k et eb al an 9 00< /d iv > <h4>CSS font-varian</h4> <div class="default">Tulisan dengan variasi default</div> <div class="small">Tulisan dengan var iasi small-caps</div> </body> </html>

50

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

Hasil dari baris kode di atas adalah seperti ditampilkan pada gambar di bawah ini:

Gambar 2.9 CSS Font

51

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

2.4.4 Link
Berfungsi untuk memberikan pengaturan efek terhadap link/hyperlink pada sebuah dokumen markup. Pengaturan bisa dilakukan untuk efek sebelum link di-klik, ketika kursor di atas link, ketika link di-klik, dan setelah link di-klik. M isal :
a:link {color:#FF0000;} a:visited {color:#0 0FF00;} a:ho ver {co lor :#F F00F F;} a:activ e {col or:#0 000FF ;} /* unvisited link */ /* visited link */ /* mouse over link */ /* selected link */

dapat dikombinasikan dengan text-decoration dan background-color. M isal :
a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:underline;} a:active {text-decoration:underline;} a:link {background-color:#B2FF99;} a:visited {background-color:#FFFF85;} a:hover {background-color:#FF704D;} a:active {background-color:#FF704D;}

Berikut contoh penggunaan link css:
Nama File : link.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <html> <head> <style type="text/css"> a.link1:link {color:#ff0000;} a.link1:visited {color:#0000ff;} a.link1:hover {color:#ffcc00;} a.link1:active {color:#cccccc;} a.link2:link {color:#ff0000;} a.link2:visited {color:#0000ff;} a.link2:hover {font-size:150%;} a.link3:link {color:#ff0000;} a.link3:visited {color:#0000ff;} a.link3:hover {background:#66ff66;}

52

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

a.link4:link {color:#ff0000;} a.link4:visited {color:#0000ff;} a.link4:hover {font-family:monospace;} a.link5:link {color:#ff0000;text-decoration:none;} a.link5:visited {color:#0000ff;text -decoration:none;} a.link5:hover {text-decoration:underline;} a.box:link,a.box:visited { display:block; font-weight:bold; color:#FFFFFF; background-color:#98bf21; width:120px; text-align:center; padding:4px; text-decoration:none; } a.box:hover,a.box:active { background-color:#7A991A; } </style> </head> <body> <h3>Letakkan kursor di atas link, dan lihat perubahannya</h3> <p><b><a class="link1" href="#">Berubah Warna</a></b></p> <p><b><a class="link2" href="#">Berubah Ukuran</a></b></p> <p><b><a class="link3" href="#">Berubah Background</a></b></p> <p><b><a class="link4" href="#">Berubah Huruf</a></b></p> <p><b><a class="link5" href="#">Berubah Text Decoration</a></b></p> <p><a class="box" href="#">Box Link</a></p> </body> </html>

53

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

Hasil dari baris kode di atas jika dilihat dengan web browser adalah :

Gambar 2.10 Link CSS

2.4.5 List
Berfungsi untuk mengatur penampilan dari list item pada dokumen markup yang meliputi ordered list, unordered list dan image. Untuk ordered list, nilai yang bisa diberikan adalah : Nilai armenian decimal decimal-leadingzero georgian lower-alpha 54 Keterangan Tradisional Armenian nomor Nomor urut biasa Nomor urut denan sufix 0 untuk angka kurang dari 10 Tradisional Georgian nomor (an, ban, gan, dst) Huruf kecil (a, b, c, d, e, dst)

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

lower-greek lower-latin lower-roman upper-alpha upper-latin upper-roman

Lambang huruf yunani (alpha, beta, gamma, dst) Huruf kecil-latin (a, b, c, d, e, dst) Huruf kecil-romawi (i, ii, iii, iv, v, dst) Huruf besar (A, B, C, D, E, dst) Huruf besar-latin (A, B, C, D, E, dst) Huruf besar-romawi (I, II, III, IV, V, dst)

Sedangkan untuk unordered list, nilai yang bisa digunakan adalah : Nilai none disc circle square M isal : Keterangan Tidak ada penanda Default. Berupa lingkaran terisi Berbentuk bulat kosong Berbentuk kotak terisi

ul.a {list-style-type: circle;} ul.b {list-style-type: square;} ol.c {list-style-type: upper-roman;} ol.d {list-style-type: lower-alpha;}

untuk list dengan image, sintaxnya adalah :
ul{list-style-image: url('sqpurple.gif');}

Berikut contoh penggunaan list dalam dokumen markup :
Nama File : contoh_3_11.html 1 2 3 4 5 6 7 8 9 10 11 12 13 <html> <head> <style type="text/css"> ul.a {list-style-type:disc;} ul.b {list-style-type:circle;} ul.c {list-style-type:square;} ul.d {list-style-type:none;} ol.e {list-style-type:decimal;} ol.f {list-style-type:decimal-leading-zero;} ol.g {list-style-type:lower-roman;} ol.h {list-style-type:upper-roman;} ol.i {list-style-type:lower-alpha;} ol.j {list-style-type:upper-alpha;}

55

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63

ol.k {list-style-type:lower-greek;} ol.l {list-style-type:lower-latin;} ol.m {list-style-type:upper-latin;} ol.n {list-style-type:armenian;} ol.o {list-style-type:georgian;} </style> </head> <body> <ul class="a"> <li>Disc type</li> <li>Agus</li> <li>Darmawan</li> </ul> <ul class="b"> <li>Circle type</li> <li>Agus</li> <li>Darmawan</li> </ul> <ul class="c"> <li>Square type</li> <li>Agus</li> <li>Darmawan</li> </ul> <ul class="d"> <li>The "none" type</li> <li>Agus</li> <li>Darmawan</li> </ul> <ol class="e"> <li>Decimal type</li> <li>Agus</li> <li>Darmawan</li> </ol> <ol class="f"> <li>Decimal-leading-zero type</li> <li>Agus</li> <li>Darmawan</li> </ol> <ol class="g"> <li>Lower-roman type</li> <li>Agus</li> <li>Darmawan</li> </ol>

56

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114

<ol class="h"> <li>Upper-roman type</li> <li>Agus</li> <li>Darmawan</li> </ol> <ol class="i"> <li>Lower-alpha type</li> <li>Agus</li> <li>Darmawan</li> </ol> <ol class="j"> <li>Upper-alpha type</li> <li>Agus</li> <li>Darmawan</li> </ol> <ol class="k"> <li>Lower-greek type</li> <li>Agus</li> <li>Darmawan</li> </ol> <ol class="l"> <li>Lower-latin type</li> <li>Agus</li> <li>Darmawan</li> </ol> <ol class="m"> <li>Upper-latin type</li> <li>Agus</li> <li>Darmawan</li> </ol> <ol class="n"> <li>Armenian type</li> <li>Agus</li> <li>Darmawan</li> </ol> <ol class="o"> <li>Georgian type</li> <li>Agus</li> <li>Darmawan</li> </ol> </body> </html>

57

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

Hasil dari baris kode di atas ditampilkan pada gambar di bawah ini :

Gambar 2.11a Ordered List 1

58

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

Gambar 2.11b Ordered List 2

59

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

Gambar 2.11c Ordered List 3

Untuk kode di atas, tidak semuanya akan ditampilkan dengan baik di semua browser. Begitu juga dengan list-image. Agar dapat ditampilkan dengan baik, bisa menggunakan cara cross browser berikut ini :
ul{ list-style-type: none; padding: 0px; margin: 0px; } li{ background-image: url(‘list_img.png’); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 20px; }

60

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

Berikut implementasi crosbrowser di dokumen markup :
Nama File : list_cross.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 Ket <html> <head> <style type="text/css"> ul{ list-style-type:none; padding:0px; margin:0px; } li{ bac kg ro un d- im ag e: ur l( 'l is t_ im g. pn g' ); background-repeat:no-repeat; background-position:0px 5px; padding-left:20px; } </style> </head> <body> <ul> <li>Agus</li> <li>Gusdar</li> <li>Darmawan</li> </ul> </body> </html>

List akan diganti dengan image

Hasil dari baris kode di atas adalah :

Gambar 2.12 List Item Crossbrowser

61

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

2.5

Penggunaan CSS dalam pembuatan website:

2.5.1 Menu Web
Dalam membuat menu web berbasis CSS, komponen html yang digunakan adalah tag <ul> … </ul> dengan mengatur property CSSnya. M issal ingin membuat menu drop down dengan komposisi sebagai berikut : Home Menu 1 Menu 2 Menu 3 Menu 4

M aka langkah awalnya adalah membuat list dari menu tersebut menggunakan tag <ul> … </ul>
<div id="menu"> <ul> <li><a href="#">Home</a></li> <li> <a href="#">Menu 1</a> <ul> <li><a href="#">Submenu 1.1</a></li> <li><a href="#">Submenu 1.2</a></li> <li><a href="#">Submenu 1.3</a></li> </ul> </li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> </ul> </div>

Tampilan di browser kode di atas adalah :

Gambar 2.1 Menu sebelum diberikan CSS

62

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

Kemudian definisikan CSS sebagai berikut, dan diletakkan pada bagian <head> dokumen. Untuk menghilangkan tanda bulat pada list, dibutuhkan CSS sebagai berikut:
#menu ul{ list-style:none; }

Tanda bulat sudah hilang

Gaambar 2.2 List tanpa gambar order

Untuk menjadikan menu horizontal, maka dibutuhkan CSS sebagai berikut:
#menu li { float:left; }

63

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

Gambar 2.3 Menu dengan tampilan horisontal

Kemudian untuk menampilkan submenu setelah kursor diletakkan di atas M enu 1 adalah dengan menambahkan CSS sebagai berikut:

Gambar 2.4 Menampilkan submenu ketika kursor berada di atas Menu 1

Dan untuk mempercantik menu, diberikan CSS sebagai berikut:
#menu li, a { font-family: Tahoma;

64

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

font-size:11px; background-color:#A7C942; height: 30px; width: 149px; display: block; border: 0.1em solid #dcdce9; color: #ffffff; text-decoration: none; text-align: center; }

Keterangan : Property Font-family Font-size Fungsi mendefinisikan font mendefinisikan ukuran font Nilai Tahoma, Arial, Bilangan bulat dengan satuan px atau em. M issal: 11px atau 1em red, green, blue #000000 s/d #FFFFFF Bilangan bulat dengan satuan px atau em. M issal: 20px atau 5em Bilangan bulat dengan satuan px atau em. M issal: 20px atau 5em Block untuk tampil dan hidden untuk tidak tampil Bilangan bulat dengan satuan px atau em diikuti dengan jenis border (solid, dotted, dashed) dan warna 65

Background-color

M emberikan warna background M endefinisikan tinggi object

Height

Width

M endefinisikan lebar object

Display

M enampilkan object

Border

M endefinisikan border object

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

border red, green, blue #000000 s/d #FFFFFF Text-decoration M emberikan efek teks pada None : tidak ada link efek; Underline : garis bawah; Bold : tebal Text-align M engatur alignment teks Center : rata tengah Left : rata kiri Right : rata kanan Justify : rata kanan kiri Sehingga secara lengkap kode untuk membuat menu adalah sebagai berikut: Color M endefinisikan warna teks
Nama File : menu.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 28 29 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmln s="http ://www. w3.org/ 1999/xh tml">< head> <title>Membuat Menu</title> <style> #menu { list-style:none; } #menu li { float:left; left:40px; position:relative; } #menu ul ul { visibility:hidden; width:149px; } #menu ul li:h over ul, #me nu u l a :hov er u l{ visibility:visible; } #menu li, a { font-family: Tahoma; font-size:11px; background-color:#A7C942; height: 30px; width: 149px; display: block;

66

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

bor de r: 0 .1 em s ol id # dc dc e9 ; color: #ffffff; text-decoration: none; text-align: center; } </style> </head> <body> <div id="menu"> <ul> <li><a href="#">Home</a></li> <li> <a href="#">Menu 1</a> <ul> <li><a href="#">Submenu 1.1</a></li> <li><a href="#">Submenu 1.2</a></li> <li><a href="#">Submenu 1.3</a></li> </ul> </li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> </ul> </div> </body> </html>

Jika ingin menambah submenu pada menu 2, tinggal menambahkan <ul>….</ul> pada <li>M enu 2</li> Tampilan akhir dari menu adalah sebagai berikut:
Ket

Gambar 2.5 Menu Horisontal dengan CSS

67

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

2.5.2 Fancy Tabel
Berfungsi untuk pengaturan tampilan tabel : border, collapse border, width dan height text-alignment, padding dan spacing, fancy tabel dan caption tabel. a. Border

Berfungsi untuk mengatur warna dan ukuran border M isal : b.
table, th, td{border: 1px solid black;}

Collapse

Berfungi untuk mengatur ketebalan dan jenis border. M isal :
table{border-collapse:collapse;} table,th, td{border: 1px solid black;}

c.

Width and Height

Berfungsi untuk mengatur lebar dan panjang tabel. Nilai yang diberikan dapat berupa % atau px. M isal :
table {width:100%;} th {height:50px;}

d.

Text alignment

Berfungsi untuk mengatur tata letak teks di dalam tabel. M isal :
td{text-align:right;} td{height:50px;vertical-align:bottom;}

e.

Padding

Berfungsi untuk mengatur jarak spasi antara border dan teks di dalam tabel. M isal :
td{padding:15px;}

68

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

f.

Fancy tabel

Berfungsi untuk memberikan tampilan yang lebih menarik pada tabel pada setiap record memiliki background yang saling bergantian sehingga memudahkan untuk membaca record.
Nama File : fancy_tabel.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html> <head> <style type="text/css"> #mahasiswa { font-family:"Trebuchet MS", Arial, Helvetica, sans -serif; width:100%; border-collapse:collapse; } #mahasiswa td, #mahasiswa th { font-size:1em; border:1px solid #98bf21; padding:3px 7px 2px 7px; } #mahasiswa th { font-size:1.1em; text-align:left; padding-top:5px; padding-bottom:4px; background-color:#A7C942; color:#ffffff; } #mahasiswa tr.alt td { color:#000000; background-color:#EAF2D3; } </style> </head> <body> <table id="mahasiswa"> <tr> <th>NIM</th> <th>NAMA</th> <th>KELAS</th>

69

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66

</tr> <tr> <td>03622029</td> <td>Agus Darmawan</td> <td>Sore</td> </tr> <tr class="alt"> <td>03622063</td> <td>Trie Sutrisno</td> <td>Sore</td> </tr> <tr class="alt"> <td>03621014</td> <td>Onny Ekasari</td> <td>Pagi</td> </tr> <tr> <td>03621019</td> <td>Dyah Puspita Sari</td> <td>Pagi</td> </tr> </table> </body> </html>

Hasil dari baris kode di atas adalah :

Gambar 2.13 Fancy tabel

70

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

g.

Caption

Berfungsi untuk memberikan judul pada tabel.
Nama File : caption_tabel.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 Ket <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html> <head> <style type="text/css"> caption {caption-side:top; text-align:left;} </style> </head> <body> <table border="1"> <ca pti on> Ta ble 1. 1 Mah asi sw a</ cap ti on> <tr> <th>NIM</th> <th>NAMA</th> <th>KELAS</th> </tr> <tr> <td>03622029</td> <td>Agus Darmawan</td> <td>Sore</td> </tr> <tr> <td>03622063</td> <td>Trie Sutrisno</td> <td>Sore</td> </tr> <tr> <td>03621014</td> <td>Onny Ekasari</td> <td>Pagi</td> </tr> <tr> <td>03621019</td> <td>Dyah Puspita Sari</td> <td>Pagi</td> </tr> </table> </body> </html>

Caption dapat diletakkan di bawah table dengan mengganti property caption-side: bottom 71

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

Hasil dari baris kode di atas adalah :

Gambar 2.14 Caption tabel

72

E-Book CSS (Cascading Style Sheet)
http://www.agusdarmawan.wordpress.com/

Sign up to vote on this title
UsefulNot useful