Dasar Dasar CSS

25

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)HTML, XML, 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). Misalnya : h1 {color : red;}. Penulisan CSS dapat dilakukan pada file lain atau di dalam dokumen markup.

Jika ditulis pada dokumen markup dan inline :

1. Menggunakan attribute style : <h1 style=”color:blue” />

Jika ditulis pada dokumen markup tetapi tidak inline (embedded) :

2. Diletakkan pada tag <head> ... </head>

3. Diawali dengan tag <style> [kode ditulis di sini] </style>

Jika ditulis pada file lain (*.css):

26

1. Diletakkan pada tag <head> ... </head>

2. Menulis embed 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. Tidak memerlukan pendefinisian yang berulang-ulang sehingga memperkecil terjandinya redundansi style.

2. Global style, jika terjadi perubahan, maka hanya 1 file yang diganti, bukan tiap-tiap dokumen markup

3. Dokumentasi dan pemeliharaan yang lebih mudah.

4. Dalam menulis stylesheet disarankan untuk menggunakan tools macromedia dreamweaver, karena setiap declaration akan otomatis suggest.

Selector yang dikenali oleh CSS adalah HTML, ID dan CLASS. Untuk selector ID, dapat digunakan pada semua element HTML dengan menuliskan attribute ID pada elemen HTML tersebut dan menambahkan karakter “#” pada dokumen CSS. Sedangkan untuk selector CLASS, dengan menambahkan karakter “.” Pada dokumen CSS dan pada elemen HTML menambahkan attribute class.

HTML Selector ID Selector Class

<div>Isi Text</div>

<div id=’text’>Isi Text</div>

<div class=’text’>Isi Text</div>

div{ color:yellow; text-align:center; }

#text { color:red; text-align:center; }

.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.

27

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/xhtml1-transitional.dtd"> <html> <head> <title> Box Modelling </title> <style> .box { width:300px; margin:10px; border:5px #332930 solid; padding:10px; text-align:center; </style>

28

15 16 17 18

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

Ket

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 :

Gambar 2.1 Box Model

CATATAN : Pada beberapa kasus, hasil tampilan web dengan CSS tidak sesuai dengan yang sudah didefinisikan. Misalnya 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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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.

29

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 Keterangan

None Tidak ada border Solid Border solid Dotted Border titik – titik Dashed Border garis – garis putus Double 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 Mengatur 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; } .dotted { width:300px; border-color:blue; border-width:1px; border-style:dotted; margin:10px; text-align:center; }

30

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 { width:300px; border-color:blue; border-width:1px; border-style:dashed; margin:10px; text-align:center; } .double { width:300px; border-color:blue; border-width:5px; border-style:double; margin:10px; text-align:center; } .groove { width:300px; border-color:blue; border-width:5px; border-style:groove; margin:10px; text-align:center; } .ridge { width:300px; border-color:blue; border-width:5px; border-style:ridge; margin:10px; text-align:center; } .inset { width:300px; border-color:blue; border-width:5px; border-style:inset; margin:10px; text-align:center; } .outset { width:300px; border-color:blue; border-width:5px; border-style:outset; margin:10px; text-align:center; } </style> </head> <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>

31

Hasil dari baris kode di atas adalah :

Gambar 2.2 Border Property

Untuk jenis border, dapat didefinisikan per sisi (top, bottom, left dan right). Misal, untuk top menggunakan solid, bottom dotted, left dashed dan right double. Maka 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.

32

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/xhtml1-transitional.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.

33

Definisi per sisi Definisi shortcut margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px;

margin:25px 50px 75px 100px; o top margin : 25px o right margin : 50px o bottom margin : 75px o left margin : 100px

margin:25px 50px 75px; o top margin : 25px o right dan left margin : 50px o bottom margin : 75px margin:25px 50px; o top dan bottom margin : 25px o right dan left margin : 50px margin:25px; o semua sisi 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 Definisi shortcut

padding-top:100px; padding-bottom:100px; padding-right:50px; padding-left:50px;

padding:25px 50px 75px 100px; o top padding: 25px o right padding: 50px o bottom padding: 75px o left padding: 100px

padding:25px 50px 75px; o top padding: 25px o right dan left padding: 50px o bottom padding: 75px padding:25px 50px; o top dan bottom padding: 25px o right dan left padding: 50px padding:25px; o semua sisi padding: 25px

Sama dengan margin, satuan nilai dari padding pun dapat berupa px, pt, em, dan %

34

2.4 Styling

Merupakan 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 IMK (Interaksi Manusia dan Komputer)

Latar Belakang Garis Tipis dan Teks Garis Tebal dan Teks Putih Biru Hitam Merah Hitam Biru Merah Hitam Putih Kuning Kuning Putih Hijau Merah Kuning Putih Hitam Hitam Kuning Putih Cyan Hijau Hitam Biru Merah Hitam Merah Biru Biru Putih Kuning Cyan Kuning Magenta Hitam Cyan

Putih

35

Cyan Biru Hitam Merah Merah Biru Hitam Magenta Magenta Hitam Putih Biru Biru Hitam Kuning Kuning Merah Biru Hitam Merah Biru Hitam Paduan warna terburuk menurut disiplin IMK (Interaksi Manusia dan Komputer)

Latar Belakang Garis Tipis dan Teks Garis Tebal dan Teks Putih Kuning Cyan Kuning Cyan Hitam Biru Merah Magenta Biru Magenta Merah Magenta Hijau Biru

Cyan Magenta Hijau Biru Cyan

Hijau Cyan Magenta Kuning Cyan Magenta Kuning Biru Hijau Merah Hitam Hijau Merah Hitam Cyan Hitam Kuning Putih Kuning Hijau Putih Magenta Hijau Merah Cyan Cyan Hijau Merah 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/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> body { background-color:#fa8292; /* return pink color */ background-image: url('diar.png'); background-repeat: no-repeat; background-position:right top; } </style> </head> <body> <h1>Selamat Datang,</h1> <p>Ini adalah halaman web yang 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

36

23 24

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

Ket 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 :

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/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> body { background-color:white; background-image: url('gradien.jpg'); } </style> </head> <body> <h1>Selamat Datang,</h1> <p>Ini adalah halaman web yang mencoba menggunakan

37

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/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> body { background-color:white; background-image: url('gradien.jpg'); background-repeat: repeat-x; } </style> </head>

38

15 16 17 18 19 20 21 22

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

Ket 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

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

39

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 scroll, gambar tidak berubah 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.

40

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"

41

Misal : 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).

Misal : h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;}

c. Dekorasi text

Berfungsi untuk memberikan hiasan text, bisa berupa garis atas/tengah/bawah, cetak tebal/miring dan berkedip.

Misal : h1 {text-decoration:overline;} / * garis atas */ h2 {text-decoration:line-through;} /* garis tengah */ h3 {text-decoration:underline;} /* garis bawah */ h4 {text-decoration:blink;} /* berkedip */

d. Transformasi

Berfungsi untuk mengatur besar kecilnya text (uppercase, lowercase atau capitalize)

Misal : p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;}

e. Inden text

Berfungsi untuk mengatur alenia text

Misal : p {text-indent:50px;}

f. Spasi antar karakter

Berfungsi untuk mengatur jarak antar karakter.

Misal : h1 {letter-spacing:2px;} h2 {letter-spacing:-3px;}

42

g. Spasi antar baris

Berfungsi untuk mengatur jarak antar baris text 1 dan 2 atau seterusnya.

Misal : p.small {line-height:90%;} p.big {line-height:200%;}

h. Letak text (direksi)

Berfungsi untuk mengatur direksi dari text, left atau right

Misal : div.ex1 {direction:rtl;}

i. Spasi antar kata

Berfungsi untuk mengatur jarak antar kata.

Misal : p{ word-spacing:30px;}

j. Menghilangkan wrap text

Berfungsi untuk menghilangkan wrapping text

Misal : p{white-space:nowrap;}

k. Vertical alignment gambar

Berfungsi untuk mengatur vertical alignment text jika disisipi gambar antar kata.

Misal : 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 */ .kedip {text-decoration:blink;} /* berkedip */ .uppercase {text-transform:uppercase;}

43

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> <div class="garis_tengah">Garis di tengah tulisan</div> <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> <div class="spasi1">jarak antara baris pertama dan kedua begitu dekat, lihat saja kalau tidak percaya</div> <div class="sapsi2">jarak antara baris pertama dan kedua begitu jauh, lihat saja kalau tidak percaya</div> <h3>Text Direction</h3>

44

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 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. 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

45

Gambar 2.8b. Text transformation – Text spasi character

46

Gambar 2.8c. Text Spasi Baris – Text nowrap

47

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

48

Generic family Font family Keterangan

Serif Times New Roman Georgia Memiliki garis tambahan di ujung huruf

Sans-serif Arial Verdana

Tidak memiliki garis tambahan di ujung huruf

Monospace Courier New Lucida Console

Memiliki ukuran yang sama untuk setiap huruf

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.

Misal : p{font-family:"Times New Roman", Times, serif;}

b. 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

49

Misal :

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.

Misal :

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.

Misal :

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;}

50

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> <div class="oblique">Tulisan dengan style oblique</div> <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> <div class="thicker">Tulisan dengan ketebalan 900</div> <h4>CSS font-varian</h4> <div class="default">Tulisan dengan variasi default</div> <div class="small">Tulisan dengan variasi small-caps</div> </body> </html>

51

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

Gambar 2.9 CSS Font

52

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.

Misal : a:link {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */

dapat dikombinasikan dengan text-decoration dan background-color.

Misal : 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;}

53

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>

54

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 Keterangan armenian Tradisional Armenian nomor decimal Nomor urut biasa decimal-leading-zero Nomor urut denan sufix 0 untuk angka kurang dari 10

georgian Tradisional Georgian nomor (an, ban, gan, dst) lower-alpha Huruf kecil (a, b, c, d, e, dst)

55

lower-greek Lambang huruf yunani (alpha, beta, gamma, dst) lower-latin Huruf kecil-latin (a, b, c, d, e, dst) lower-roman Huruf kecil-romawi (i, ii, iii, iv, v, dst) upper-alpha Huruf besar (A, B, C, D, E, dst) upper-latin Huruf besar-latin (A, B, C, D, E, dst) upper-roman Huruf besar-romawi (I, II, III, IV, V, dst) Sedangkan untuk unordered list, nilai yang bisa digunakan adalah :

Nilai Keterangan none Tidak ada penanda disc Default. Berupa lingkaran terisi circle Berbentuk bulat kosong square Berbentuk kotak terisi Misal :

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;}

56

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>Tea</li> <li>Coca Cola</li> </ul> <ul class="b"> <li>Circle type</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="c"> <li>Square type</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="d"> <li>The "none" type</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ol class="e"> <li>Decimal type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="f"> <li>Decimal-leading-zero type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="g"> <li>Lower-roman type</li> <li>Tea</li> <li>Coca Cola</li> </ol>

57

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>Tea</li> <li>Coca Cola</li> </ol> <ol class="i"> <li>Lower-alpha type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="j"> <li>Upper-alpha type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="k"> <li>Lower-greek type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="l"> <li>Lower-latin type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="m"> <li>Upper-latin type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="n"> <li>Armenian type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="o"> <li>Georgian type</li> <li>Tea</li> <li>Coca Cola</li> </ol> </body> </html>

58

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

Gambar 2.11a Ordered List 1

59

Gambar 2.11b Ordered List 2

60

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; }

61

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

<html> <head> <style type="text/css"> 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; } </style> </head> <body> <ul> <li>Deni</li> <li>Juwed</li> <li>Sutaji</li> </ul> </body> </html>

Ket List akan diganti dengan image Hasil dari baris kode di atas adalah :

Gambar 2.12 List Item Crossbrowser

62

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. Missal ingin membuat menu drop down dengan komposisi sebagai berikut :

Home Menu 1 Menu 2 Menu 3 Menu 4

Maka 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

63

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; }

Gaambar 2.2 List tanpa gambar order

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

Tanda bulat sudah hilang

64

Gambar 2.3 Menu dengan tampilan horisontal

Kemudian untuk menampilkan submenu setelah kursor diletakkan di atas Menu 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;

65

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 Fungsi Nilai

Font-family mendefinisikan font Tahoma, Arial, Font-size mendefinisikan ukuran font Bilangan bulat

dengan satuan px atau em. Missal: 11px atau 1em

Background-color Memberikan warna background

red, green, blue #000000 s/d #FFFFFF

Height Mendefinisikan tinggi object Bilangan bulat dengan satuan px atau em. Missal: 20px atau 5em

Width Mendefinisikan lebar object Bilangan bulat dengan satuan px atau em. Missal: 20px atau 5em

Display Menampilkan object Block untuk tampil dan hidden untuk tidak tampil

Border Mendefinisikan border object Bilangan bulat dengan satuan px atau em diikuti dengan jenis border (solid, dotted, dashed) dan warna

66

border Color Mendefinisikan warna teks red, green, blue

#000000 s/d #FFFFFF

Text-decoration Memberikan efek teks pada link

None : tidak ada efek; Underline : garis bawah; Bold : tebal

Text-align Mengatur 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: 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/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><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:hover ul, #menu ul a:hover ul{ visibility:visible; } #menu li, a { font-family: Tahoma; font-size:11px; background-color:#A7C942; height: 30px; width: 149px; display: block;

67

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

border: 0.1em solid #dcdce9; 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>

Ket Jika ingin menambah submenu pada menu 2, tinggal menambahkan <ul>….</ul> pada <li>Menu 2</li>

Tampilan akhir dari menu adalah sebagai berikut:

Gambar 2.5 Menu Horisontal dengan CSS

68

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

Misal : table, th, td{border: 1px solid black;}

b. Collapse

Berfungi untuk mengatur ketebalan dan jenis border.

Misal : 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.

Misal : table {width:100%;} th {height:50px;}

d. Text alignment

Berfungsi untuk mengatur tata letak teks di dalam tabel.

Misal : td{text-align:right;}

td{height:50px;vertical-align:bottom;}

e. Padding

Berfungsi untuk mengatur jarak spasi antara border dan teks di dalam tabel.

Misal : td{padding:15px;}

69

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/xhtml1-transitional.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>

70

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>Deni Sutaji</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>


Gambar 2.13 Fancy tabel

71

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> caption {caption-side:top; text-align:left;} </style> </head> <body> <table border="1"> <caption>Table 1.1 Mahasiswa</caption> <tr> <th>NIM</th> <th>NAMA</th> <th>KELAS</th> </tr> <tr> <td>03622029</td> <td>Deni Sutaji</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>

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

72


Gambar 2.14 Caption tabel

Dasar Dasar CSS

Documents

Transcript of Dasar Dasar CSS