BAB 2 - Dasar-Dasar CSS

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

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.
3.
Diletakkan pada tag <head> ... </head>
Diawali dengan tag <style> [kode ditulis di sini] </style>
Jika ditulis pada file lain (*.css):
25

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

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.

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

2.3 Box Modeling

2.3.1 Box Modeling

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


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>

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:

27


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

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

Nama File : border.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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; text-
align:center; }

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 :

Berikut contoh penggunaan border

29


16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

. d a s h e d {
b o r d e r - w i d t h : 1 p x ;
align:center; }
. d o u b l e {
b o r d e r - w i d t h : 5 p x ;
align:center; }
. g r o o v e {
b o r d e r - w i d t h : 5 p x ;
align:center; }
.ridge {
b o r d e r - w i d t h : 5 p x ;
align:center; }
.inset {
b o r d e r - w i d t h : 5 p x ;
align:center; }
. o u t s e t {
b o r d e r - w i d t h : 5 p x ;
align:center; }
</style>
</head>

width:300px; border-color:blue;
border-style:dashed; margin:10px; text-
border-style:double; margin:10px; text-
border-style:groove; margin:10px; text-
border-style:ridge; margin:10px; text-
border-style:inset; margin:10px; text-
border-style:outset; margin:10px; text-
37
38
39
40
41
42
43
44
45
46
47

30

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

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.

31


Nama File : outline.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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.
32

Definisi per sisi Definisi shortcut
padding-top:100px;
padd in g-b ott om :10 0px ;
padding-right:50px;
padding-left:50px;
padd ing :25p x 5 0px 75 px 100p x;
o top padding: 25px
o right padding: 50px
o b ot to m p ad di ng : 75 p x
o left padding: 100px
pad di ng: 25 px 5 0px 7 5p 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;
o top dan bott om padding: 25px
o right dan le ft padding: 50px
padding:25px;
o semua sisi padding: 25px

Definisi per sisi Definisi shortcut
mar gi n- to p: 10 0p x;
margin-bottom:100px;
margin-right:50px;
mar gi n- le ft :5 0p x;
mar gi n:2 5p x 5 0p x 75p x 10 0px ;
o top margin : 25px
o right margin : 50px
o b ot tom m ar gi n : 75 px
o left margin : 100px
margin:25px 50px 75px;
o top margin : 25px
o right dan left margin : 50px
o b ot tom m ar gi n : 75 px
margin:25px 50px;
o top dan bott om margin : 25px
o right dan le ft 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 :

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

33

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

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)

34

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
transitional.dtd">
<html>
<head>
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

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

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)

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.

35


Nama File : background_2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
transitional.dtd">
<html>
<head>
body
{
background-color:white;
bac kg ro un d- im ag e: u rl (' gr ad ie n. jp g' );
}
</style>
</head>
<body>
<p>Ini adalah halaman web yang mencoba menggunak an

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.

36


1
2
3
4
5
6
7
8
9
10
11
12
13
14
transitional.dtd">
<html>
<head>
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>

18
19
20
21
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.

37


15
16
17
18
19
20
21
22
<body>
<p>Ini adalah ha laman web y ang mencoba menggunakan
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

1
2
3
4
5
6
7
8
9
10
<html>
<head>
body
{
margin-left:300px;
background:#5d9ab2 url('diar.png') no-repeat top left
fixed;
}
.container

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

38

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


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

40

nama warna, ex : "red"
RGB nilai RGB, ex : "rgb(255,0,0)"
Hex nilai hexadesimal, ex : "#ff0000"

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
h2
h3
h4
d.
{text-decoration:overline;} / * garis atas */
{text-decoration:line-through;} /* garis tengah */
{text-decoration:underline;} /* garis bawah */
{text-decoration:blink;} /* berkedip */
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;}

41

Nama File : text.html
1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
.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;}

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.

42


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


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


Gambar 2.8b. Text transformation Text spasi character

45


Gambar 2.8c. Text Spasi Baris Text nowrap

46


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

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

48

Nama File : font.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
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;}

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.

49


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

50

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 variasi small-caps</div>
</body>
</html>

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

Gambar 2.9 CSS Font

51

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

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;}
a : v i s i t e d { c o l o r : # 0 0 F F 0 0 ; }
a : h o v e r { c o l o r : # F F 0 0 F F ; }
a : a c t i v e { c o l o r : # 0 0 0 0 F F ; }
/* unvisited link */
/* visited link */
/* mouse over link */
/* 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:

52


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


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)

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 :

54

Nama File : contoh_3_11.html
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
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;}

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)

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

Sedangkan untuk unordered list, nilai yang bisa digunakan adalah :

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 :

55


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
56

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>

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


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

Gambar 2.11a Ordered List 1

58


Gambar 2.11b Ordered List 2

59


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


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>
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>
Ket List akan diganti dengan image

Berikut implementasi crosbrowser di dokumen markup :


Gambar 2.12 List Item Crossbrowser
61


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>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
</ul>
</div>

Tampilan di browser kode di atas adalah :

Gambar 2.1 Menu sebelum diberikan CSS
62


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


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

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

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 :

65

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
transitional.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;
height: 30px;
width: 149px;
display: block;

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:

66


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

67


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

68

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
transitional.dtd">
<html>
<head>
#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;
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>

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.

69


43
44
45
46
47
48
49
50
51
52
53
54
55
56

</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>
57
58 </tr>
<td>Pagi</td>
59
60
61
62
63
64
65
66
<tr>
<td>03621019</td>
<td>Dyah Puspita Sari</td>
<td>Pagi</td>
</tr>
</table>
</body>
</html>


Gambar 2.13 Fancy tabel
70

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
transitional.dtd">
<html>
<head>
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>
Ket
Caption dapat diletakkan di bawah table dengan mengganti property
caption-side: bottom

g.

Caption

Berfungsi untuk memberikan judul pada tabel.

71



Gambar 2.14 Caption tabel

72

BAB 2 - Dasar-Dasar CSS

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

BAB 2 - Dasar-Dasar CSS

Загружено:

Авторское право:

Доступные форматы

E-Book CSS (Cascading Style Sheet)

Вам также может понравиться