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
