Cascading Style Sheet

• CSS adalah standar pembuatan dan pemakaian style (font, warna, jarak baris, dll) untuk
dokumen terstruktur

• CSS memisahkan presentation sebuah dokumen dari content dokumen itu sendiri

• CSS memudahkan pembuatan dan pemeliharaan dokumen web

• Setiap User Agent mempunyai default style sheet

Pendefinisian rule CSS pada sebuah dokumen akan menimpa rule pada default style sheet

• Spesifikasi CSS1, http://www.w3.org/TR/REC-CSS1

• Spesifikasi CSS2, http://www.w3.org/TR/REC-CSS2

Sintaks Rule

• Style sheet didefinisikan dalam bentuk rule, terdiri dari:

– Selector

– Declaration : property & value

• Contoh rule :

h1 { color: blue }

Keterangan:

– Selector : h1

– Property : color

– Value : blue

• Seluruh elemen (tag) HTML dapat digunakan sebagai selector

Kategori Style Sheet

• Inline Style Sheet (di dalam elemen HTML)

o <p style="color: green">

SUWINARNO NADJAMUDDIN 1
 • Embedded Style Sheet (di dalam dokumen HTML)

o <style type="text/css">
h1 {color: blue}
</style>

• Linked Style Sheet (di file eksternal)

o <link rel="stylesheet" type="text/css" href="http://webku.com/cool.css">

o <style type="text/css">
@import url(http://webku.com/cool.css);
</style>

• Isi file eksternal sama dengan kode di antara tag <style> </style>

• Default Style Sheet (style default dari browser)

Grouping & Inheritance

• Grouping (pengelompokan) :

– Selector : h1, h2, h3 { font-family: arial }

– Declaration : h1 { font-weight: bold; font-size: 14pt }

– Value : h1 { font: bold 12pt arial }

• Inheritance (pewarisan) :

Bila style tidak didefinisikan, maka akan digunakan definisi style dari induknya

SUWINARNO NADJAMUDDIN 2
Macam-macam Selector

h1 {color: green}

i {font-style: normal}

• Class

.mhs {border: black solid 1; color: gray}

.nama {font: bold 20 Arial}

• ID

#mhs02 {color: red}

• Kontekstual

h1 i {color: navy}

SUWINARNO NADJAMUDDIN 3
div.mhs .alamat b {color: green}

Specificity

• Cara menentukan nilai specificity :

– Hitung jumlah atribut ID (a)

– Hitung jumlah atribut CLASS (b)

– Hitung jumlah nama tag (c)

– Deretkan angka a b c sehingga membentuk sebuah angka

– Angka yang lebih besar berarti lebih spesifik

• Contoh :

li {...} /* a=0 b=0 c=1 -> specificity = 1 */

ul li {...} /* a=0 b=0 c=2 -> specificity = 2 */

ul ol li {...} /* a=0 b=0 c=3 -> specificity = 3 */

li.mhs {...} /* a=0 b=1 c=1 -> specificity = 11 */

ul ol li.mhs {...} /* a=0 b=1 c=3 -> specificity = 13 */

#mhs01 {...} /* a=1 b=0 c=0 -> specificity = 100 */

Pseudo Class

SUWINARNO NADJAMUDDIN 4
 • Pseudo class dapat digunakan sebagai selector meskipun class-nya tidak
terdapat di kode HTML

• Untuk menyatakan style yang digunakan jika suatu kondisi eksternal

dikenakan pada elemen HTML (misalnya di-klik mouse)

• Sintaks pseudo class :

selector:pseudo-class {property: value}

• Anchor (<A>) pseudo class :

– :link

– :visited

– :hover

– :active

– :focus

• Contoh :

a:link { color: red }

a:visited { color: green }

a:hover { color: blue }

a:active { color: purple }

a:focus { color: yellow }

a.mhs:link { color: maroon }

Pseudo Element

• Untuk menyatakan style yang digunakan terhadap suatu kondisi tipografi,

bukan struktur (misalnya baris pertama)
SUWINARNO NADJAMUDDIN 5
 • Pseudo element :

– :first-letter

– :first-line

• Contoh :

p:first-letter { font-size: 200%; float: left}

p:frist-line { color: green }

h1.mhs:first-letter { font-size: 20pt }

SUWINARNO NADJAMUDDIN 6