Sei sulla pagina 1di 27

BAB 6

Style Sheet dan Graphic

Bicara tentang HTML pasti akan menyinggung peran style sheet.


Keduanya, yaitu HTML dan style sheet, sering kali tak terpisahkan.
Style sheet sendiri sering hadir di dunia internet dengan istilah
yang lebih lengkap, yaitu Cascading Style Sheet (CSS). Secara
umum, style sheet hadir untuk melengkapi kelemahan HTML
terutama yang berkaitan erat dengan style atau gaya.
CSS adalah kode-kode yang mengatur bagaimana format sebuah
tag memengaruhi gaya tampilan web page di jendela browser. Ada
dua cara yang lazim dipakai untuk menyisipkan kode-kode CSS.
Yang pertama adalah dengan menulis kode-kode itu langsung di
area <head> … </head> script HTML. Cara kedua adalah dengan
memisahkan kode-kode CSS itu dalam file terpisah dan kemudian,
kita “gabungkan” kode itu ke dalam script HTML menggunakan
metode khusus. Cara kedua ini ideal jika Anda ingin bekerja de-
ngan banyak script HTML dengan memanfaatkan kode CSS yang
sama.
Selain itu, Anda juga bisa menyisipkan kode style langsung ke
dalam tag-tag tertentu. Di dalam bab ini, kita akan mempelajari
bagaimana CSS memengaruhi style di jendela browser. Selan-
jutnya kita juga akan belajar bagaimana menciptakan style-style
unik menggunakan CSS itu.

Memahami Styles
Sebenarnya apa itu Styles? Apabila diterjemahkan secara bebas,
style berarti aturan-aturan yang mengatur bagaimana tag akan
menghasilkan format dokumen. Ingatkah Anda ketika bekerja
menggunakan ordered list dan unordered list ketika mempelajari

93
Bulleted List dan Numbered List? Di situ, kita telah memanfaatkan
atribut style untuk memengaruhi bentuk lingkaran-lingkaran atau
nomor urut sebuah list.

<ul style=”list-style-type: square”>

Pada potongan script di atas, kita telah mengatur bahwa sebuah


unordered list menggunakan poin-poin berbentuk persegi empat.
Namun jika dalam sebuah dokumen terdapat tiga buah unordered
list yang saling terpisah satu dengan lainnya (baca: ada tiga tag
<ul> yang berbeda-beda), maka Anda harus menulis script di atas
berulang-ulang. Tentu cara ini tidak praktis dan membuang energi.
Lantas? Supaya tidak berulang-ulang, Anda bisa menciptakan
<style> di dalam area tag <head>…</head> yang mengatur se-
cara menyeluruh penggunaan poin-poin untuk semua unordered
list.
Sebagai contoh, Anda bisa menulis seperti ini:

<style type=”text/css”>
Ul {
List-style-type: square
}
</style>

Pada contoh di atas, kita akan menyeragamkan tag <ul> sehingga


apabila tag ini digunakan maka list-style-type yang digunakan
berjenis square. Berikut script lengkapnya:

<!DOCTYPE HTML>

<html>
<head>

<style type="text/css">
ul {
list-style-type: square
}
</style>
<title>HTML Pertamaku</title>
</head>

<body>
<h1>Selamat Datang Dunia HTML!</h1>
<p>Akhirnya saya bisa belajar HTML.</p>

<h2>Rancangan Daftar Isi:</h2>

94
<ul>
<li>Mengenal HTML
<li>Formatting Text
<li>Hyperlink
<li>Graphic dan Image Map
</ul>

</body>
</html>

Poin-poin berbentuk persegi empat

Mulai sekarang, di dalam halaman web page yang sama (masih


satu script HTML), setiap kali Anda gunakan tag <ul> maka akan
menghasilkan poin-poin berbentuk persegi empat.
Anda juga bisa menggabungkan pengaturan style untuk ordered
list. Pada contoh di bawah ini, baik unordered list maupun ordered
list diatur memakai style:

<style type=”text/css”>
ul {
List-style-type: square
}
ol {list-style-type: lower-alpha
}
</style>

95
Konsep-Konsep Dasar CSS
Berikut ini konsep-konsep dasar yang perlu Anda ketahui untuk
menggunakan CSS.

Pewarisan (Legacy)
CSS memiliki konsep pewarisan yang memungkinkan suatu aturan
berlaku bagi suatu elemen dan sub-sub elemen di dalamnya.
Untuk mempermudah pemahaman Anda, terlebih dahulu akan di-
jelaskan mengenai struktur dokumen.
Berikut ini adalah contoh struktur dokumen suatu halaman web:

Contoh struktur dokumen html

Struktur dokumen ini dapat diibaratkan sebagai sebuah pohon


keluarga, di mana html merupakan orang tua dari head dan body,
img merupakan anak dari p, dan seterusnya.
Aturan yang diterapkan pada suatu elemen secara otomatis ber-
laku juga pada anak dari elemen tersebut. Berikut ini adalah
contohnya:

96
Aturan elemen p berlaku juga bagi anak-anaknya (img tidak
terpengaruh karena aturan yang ada menetapkan jenis dan
ukuran huruf, sedangkan img merupakan gambar)

Jika terjadi aturan yang bertabrakan (elemen yang sama dengan


beberapa aturan yang berbeda), aturan yang dituliskan paling ter-
akhir yang akan diterapkan.
Berikut ini contoh aturan yang bertabrakan untuk elemen p, aturan
yang akan diterapkan adalah aturan terakhir (color: green;):

<style>
p { color: red; }
p { color: blue; }
p { color: green; }
</style>

atau

<style>
p { color: red;
color: blue;
color: green; }
</style>

Model Kotak
Tanpa Anda sadari sebenarnya setiap elemen dalam halaman web
berada dalam sebuah kotak. Kotak tersebut tidak terlihat karena
secara default diatur transparan dan Anda dapat memunculkan
kotak tersebut dalam browser dengan menggunakan aturan CSS.
Berikut ini contoh aturan CSS yang menampilkan border kotak
dengan warna biru:

97
h1 { border: 1px solid blue; }
h2 { border: 1px solid blue; }
p { border: 1px solid blue; }
em { border: 1px solid blue; }
img { border: 1px solid blue; }

Kotak yang membungkus setiap elemen

Memformat Teks
Berikut ini adalah daftar properti yang digunakan untuk mem-
format teks:

Properti   Deskripsi  Nilai 


font   Properti yang digunakan untuk  semua properti font dan 
menggabungkan beberapa  nilainya 
properti font 
font‐family   Mengatur jenis huruf  satu atau lebih jenis huruf 
atau huruf generik (serif, sans‐
serif, monospace, cursive, 
fantasy) 
font‐size   Mengatur ukuran huruf  ukuran piksel | persentase | 
xx‐small | x‐small | small | 
medium | large | x‐large | xx‐
large | smaller | larger | 
inherit 
font‐style   Mengatur huruf miring  normal | italic | oblique | 
inherit 
font‐variant   Mengatur huruf kecil/kapital  normal | small‐caps | inherit 
font‐weight   Mengatur tebal huruf  normal | bold | bolder | 
lighter | 100 | 200 | 300 | 400 

98
| 500 | 600 | 700 | 800 | 900 
| inherit 
letter‐spacing   Mengatur spasi antar‐huruf  ukuran panjang | normal | 
inherit 
line‐height   Mengatur jarak antarbaris  angka | ukuran panjang | 
persentase | normal | inherit 
text‐align   Mengatur kesejajaran teks  left | right | center | justify | 
secara horizontal  inherit 
 
text‐ Mengatur garis bawah, garis  none | underline | overline | 
decoration   atas, atau garis tengah  line‐through | blink 
text‐direction   Mengatur arah teks, kiri ke  ltr | rtl |inherit 
kanan atau sebaliknya 
text‐indent   Mengatur jarak masuk pada  ukuran panjang | persentase | 
baris pertama paragraf  inherit 
text‐shadow   Menambahkan bayangan di  ‘offset horisontal’ ‘offset 
bawah teks  vertikal’ ‘radius blur’ ‘warna’ | 
none 
text‐ Mengganti kapitalisasi teks  none | capitalize | lowercase | 
transform   uppercase | inherit 
unicode‐bidi   Mengatur algoritma Unicode  normal | embed | bidi‐
bidirectional  override | inherit 
vertical‐align   Mengatur posisi vertikal dari  baseline | sub | super | top | 
elemen inline  text‐top | middle | 
textbottom | bottom | 
percentage | length | inherit 
visibility   Menampilkan atau  visible | hidden | collapse | 
menyembunyikan teks  inherit 
white‐space  Mengatur tampilan spasi pada  normal | pre | nowrap | pre‐
halaman  wrap | pre‐line | inherit 
word‐spacing  Memasukkan spasi antarkata  ukuran panjang | normal | 
inherit 

Daftar properti untuk memformat teks

Mengubah Warna Teks


Untuk mengubah warna teks, Anda dapat menggunakan properti
color. Nilai-nilai yang dapat digunakan pada properti color adalah:
nilai warna (nama warna atau numerik warna) dan inherit.
Berikut ini adalah contoh penggunaan properti color:

99
h1 { color: gray; }
h1 { color: #666666; }
h1 { color: #666; }
h1 { color: rgb(102,102,102); }

Jenis-Jenis Selector
Berikut ini adalah jenis-jenis selector pada CSS:
ƒ Selector elemen: p { color: black; }
ƒ Selector grup: p, ul, p, td, th { color: black; }
Selector grup ini memilih beberapa elemen sekaligus yang
nantinya akan mengikuti aturan yang sama. Setiap elemen
dipisahkan dengan koma.
ƒ Selector turunan: li em { color: black; }
Selector turunan memungkinkan Anda untuk hanya me-
milih elemen yang merupakan turunan dari elemen kon-
tainer. Pada contoh di atas, elemen yang dipilih hanya
elemen em yang merupakan turunan dari elemen li (em
yang berada di dalam kontainer li).

Contoh selector turunan

ƒ Selector id: <li id=”catalog1234”>T-shirt 1234</li>


(HTML)
li#catalog1234 { color: black; } (CSS)

100
ƒ Selector class: <li class=”kaos”>Kaos 1</li> (HTML)
li.kaos { color: black; } (CSS, untuk semua
elemen dengan kelas kaos dalam elemen
li)
.kaos { color: black; } (CSS, untuk semua
elemen dengan kelas kaos pada halaman
web)

Selector Pseudo-Class
Selector pseudo-class biasanya digunakan untuk menandakan ke-
adaan suatu elemen seperti diklik, dipilih, merupakan anak atau
orangtua dari elemen tertentu, dan masih banyak lagi.
Selector pseudo-class digunakan dengan cara menambahkan
tanda : (titik dua) setelah nama elemen seperti contoh berikut:

li:first-child { ...... }

Pseudo-class link
:link mengatur tampilan link-link yang belum diklik/
dikunjungi.
:visited mengatur tampilan link-link yang sudah diklik/
dikunjungi.

Berikut ini contoh penggunaannya:


a:link { color: maroon; }

a:visited { color: gray; }

Pseudo-class Aksi Pengguna


:focus mengatur tampilan elemen yang telah dipilih dan
siap menerima masukan pengguna.
Berikut adalah contoh penggunaannya:

input:focus { background-color: yellow; }

101
:hover mengatur tampilan jika suatu elemen dilewati oleh
pointer mouse.
Berikut adalah contoh penggunaannya:

a:hover {
color: maroon;
background-color: #ffd9d9;
}

:active mengatur tampilan elemen yang sedang dipilih/


diklik.
Berikut adalah contoh penggunaannya:

a:active {
color: red;
background-color: #ffd9d9;
}

Contoh penggunaan pseudo-class

Berikut ini adalah daftar pseudo-class lain yang dapat Anda gu-
nakan:

Pseudo-class struktural
:root :empty :first-child
:last-child :only-child :first-of-type
:last-of-type :only-of-type :nth-child()
:nth-last-child() :nth-of-type() :nth-last-of-type()

Selector antarmuka
:enabled :disabled :checked

Baris dan Huruf Pertama


Berikut ini adalah pseudo-class untuk mengatur tampilan baris dan
huruf pertama pada suatu elemen.
:first-line untuk mengatur tampilan baris pertama. Properti
yang dapat Anda atur adalah:

102
color font background
word-spacing letter-spacing text-decoration
vertical-align text-transform line-height

:first-letter untuk mengatur tampilan huruf pertama. Properti


yang dapat Anda atur adalah:

color font text-decoration


text-transform vertical-align padding
background margin line-height
border float letter-spacing
word-spacing

Contoh penggunaan pseudo-class untuk baris dan huruf


pertama

Selector Atribut
Anda dapat menggunakan selector untuk memilih elemen ber-
dasarkan nama atributnya.
Berikut ini adalah berbagai contoh penggunaan selector atribut:
ƒ elemen[atribut] contoh: img[title] {border: 3px solid;}
ƒ elemen[atribut=”nilai pasti”] contoh: img[title="first grade"]
{border: 3px solid;}
ƒ elemen[atribut~=”nilai”] contoh: img[title~="grade"]
{border: 3px solid;}
ƒ elemen[atribut|=”nilai”] contoh: *[hreflang|="en"] {border:
3px solid;}

103
ƒ elemen[atribut^=”bagian pertama dari nilai”] contoh:
img[src^="/images/icons"] {border: 3px solid;}
ƒ elemen[atribut$=”bagian terakhir dari nilai”] contoh:
a[href$=".pdf"] {border: 3px solid;}
ƒ elemen[atribut*=”bagian tertentu dari nilai”] contoh:
img[title*="February"] {border: 3px solid;}

Mengganti Bullets dan Numbers pada


Daftar
Anda dapat mengganti tampilan bullets dan numbers pada daftar
dengan menggunakan properti list-style-type. Nilai yang dapat di-
gunakan dalam properti ini adalah:

none | disc | circle | square | decimal | decimal-leading-zero


| lower-alpha | upper-alpha | lower-latin | upper-latin |
lower-roman | upper-roman | lower-greek | inherit

Tampilan bullets yang berbeda pada daftar

Tampilan numbers pada daftar

104
Posisi Bullets dan Numbers
Anda dapat mengatur posisi bullets dan numbers dengan properti
list-style-position. Nilai yang dapat digunakan dalam properti ini
adalah:

inside | outside | inherit

Tampilan posisi bullets

Membuat Bullets Sendiri


Anda dapat menggunakan gambar bullets Anda sendiri dengan
menggunakan properti list-style-image. Berikut adalah nilai-nilai
dalam properti ini:

alamat url | none | inherit

Berikut adalah contoh penggunaannya:

ul {
list-style-image: url(/images/happy.gif);
list-style-type: circle;
list-style-position: outside;
}

Contoh penggunaan gambar sebagai bullets

105
Warna dan Latar Belakang
Berikut ini adalah tabel daftar properti yang dapat Anda gunakan
untuk mengatur warna dan latar belakang.

Daftar Properti Warna dan Latar Belakang

Properti  Deskripsi  Nilai 


background   Properti untuk  semua jenis properti 
menggabungkan pengaturan  background beserta nilainya 
semua properti latar belakang 
background‐ Mengatur apakah latar  scroll | fixed | local | inherit 
attachment   belakang dapat digulir ke 
bawah atau tidak 
background‐ Mengatur luas tampilan   
clip   gambar latar belakang 
background‐ Mengatur warna latar  nilai warna (nama atau 
color   belakang suatu elemen  numerik) | transparent | 
inherit 
background‐ Menentukan lokasi gambar  url (lokasi gambar) | none | 
image   yang akan digunakan sebagai  inherit 
latar belakang 
background‐ Mengatur letak perhitungan   
origin   posisi latar belakang 
background‐ Mengatur lokasi gambar latar  ukuran panjang | persentase 
position   belakang  | left | center | right | top | 
bottom | inherit 
background‐ Mengatur pengulangan  repeat | repeat‐x | repeat‐y | 
repeat   gambar latar belakang  no‐repeat | inherit 
background‐ Mengatur ukuran gambar   
size   latar belakang 
color   Mengatur warna teks dan  nilai warna (nama atau 
bingkai  numerik) | inherit 
opacity   Mengatur tingkat  angka (0 sampai 1) 
  transparansi suatu elemen 

Membuat Style
Jadi pada dasarnya membuat style untuk sebuah atau beberapa
tag sangatlah mudah Aturannya. Cukup “bungkus” tag itu meng-

106
gunakan two-sided tag <style>…</style> dan letakkanlah di area
<head>…</head>.
Untuk memberi gambaran yang lebih detail, di bawah ini adalah
upaya untuk membuat agar teks apa pun, selama berada di dalam
tag <h1>…</h1> akan berwarna biru. Cara menulisnya seperti ini:

<style>
h1 {
color: blue
}
</style>

Anda juga bisa menyisipkan aturan formatting lainnya, misalnya


pada script di bawah ini yang mengatur tidak hanya warna saja
tapi juga ukuran font.

<style>
h1 {
color: blue;
font-size: 16px;
}
</style>

Jangan lupa untuk membubuhkan tanda titik-koma pada masing-


masing aturan formatting jika ada beberapa aturan yang ingin
dilibatkan. Berikut script lengkapnya:

<!DOCTYPE HTML>

<html>
<head>

<style type="text/css">
h1 {
color: blue;
font-size: 16px;
}
</style>

<title>HTML Pertamaku</title>
</head>

<body>
<h1>Selamat Datang Dunia HTML!</h1>
<p>Akhirnya saya bisa belajar HTML.</p>

</body>
</html>

107
Teks <h1> yang memiliki ukuran dan warna spesifik

Dengan contoh script di atas, tag <h1> yang umumnya meng-


hasilkan tulisan lebih besar pun bisa dibuat berukuran lebih kecil
atau sama dengan teks-teks lainnya yang tidak berada di antara
tag <h1> dan </h1>.
Apabila Anda ingin agar semua tag heading, yaitu tag <h1> sam-
pai dengan <h6> berwarna biru, maka penulisannya seperti ini:

<style>
h1, h2, h3, h4, h5, h6 {
color: blue
}
<style>

Mengenal Class dan ID


Telah kita buktikan sendiri bahwa style dapat mengubah tag HTML
standar. Yang terlihat di jendela browser bisa berubah apabila
Anda menggunakan style. Tag pun akan mengikuti style yang
Anda buat itu. Lantas? Setelah mengenal style, kita akan me-
ngenal Class dan ID yang sebenarnya masih satu paket dengan
style.
Mari untuk tahap pertama kita mempelajari Class terlebih dulu.
Class itu merupakan semacam penunjuk elemen-elemen tertentu
dalam script HTML. Sebagai contoh, Anda membuat bulleted list

108
(unordered list) berisi 5 poin. Poin pertama sampai keempat ingin
Anda tulis dengan warna hitam (default) sementara poin kelima
ditulis menggunakan warna merah. Jika ingin seperti ini, Anda
bisa menulis script pendek seperti berikut untuk poin kelima:

<li style=”color: red”>Kaos T-Shirt

Dengan meletakkan atribut style dan mengisinya dengan warna


merah, maka poin kelima tersebut akan ditulis menggunakan
huruf berwarna merah. Tapi masalahnya, jika suatu saat nanti
Anda ingin menggantinya dengan teks berwarna biru, apa yang
Anda lakukan?
Jika poin di atas berjumlah satu saja, maka Anda bisa mengganti
tulisan “red” menjadi “blue”. Tapi kalau ternyata jumlahnya ra-
tusan, apakah Anda ingin menggantinya satu demi satu (lebih-
lebih kalau poin itu diletakkan di file yang berbeda-beda)?
Untuk memecahkan segala ketidaknyamanan di atas, kita bisa
memanfaatkan Class. Kita bisa menulis seperti ini di area <style>:

<style>
.teks {
Color: red
}
</style>

Selanjutnya, ketika membuat poin kelima menggunakan tag <li>,


cukup kita tulis seperti ini:

<li class=”teks”>Kaos T-Shirt

Nanti kalau Anda berubah pikiran, cukup ubah nilai class itu saja
di area <style> yang semula .teks {color: red} menjadi .teks {color:
blue}. Semua <li> yang menggunakan class “teks” akan berubah
warna.
Berikut salah satu script lengkapnya:

<!DOCTYPE HTML>

<html>
<head>
<style>

109
.teks {
color: red
}
</style>

<title>HTML Pertamaku</title>
</head>

<body>
<h1>Selamat Datang Dunia HTML!</h1>
<p>Akhirnya saya bisa belajar HTML.</p>
<p>Dengan bantuan buku <b><i>"Step by Step HTML5"</i></b>
karangan Jubilee Enterprise

(diterbitkan oleh PT Elex Media Komputindo), belajar HTML


menjadi sangat mudah dan

sederhana.</p>

<h2>Langkah-Langkah Membeli Buku</h2>


<ol style="list-style-type: lower-alpha">
<li>Masuklah ke toko buku Gramedia
<li>Sebutkan identitas buku berikut:
<ul style="list-style-type: square">
<li><b>Judul</b>: Step by Step HTML 5
<li class="teks"><b>Penerbit</b>: PT Elex Media Komputindo
<li><b>Penulis</b>: Jubilee Enterprise
</ul>
<li>Pergilah ke kasir.
<li>Bayarlah buku tersebut.
</ol>

Salah satu poin diberi warna merah

110
Lantas bagaimana dengan ID? ID pada dasarnya sama dengan
Class. Bedanya, dalam sebuah dokumen skrip HTML, ID hanya
bisa dipakai sekali saja. Jadi kalau Anda ingin menggunakan tag
untuk menghasilkan efek yang spesifik dan unik, Anda bisa
menggunakan ID.
Untuk menggunakan ID, caranya sama seperti pembuatan Class.
Bedanya, tanda titik “.” diganti dengan tanda pagar “#”.

<style>
#teks {
Color: red
}
</style>

Pada tag, cukup tuliskan seperti ini:

<li id=”teks”>

Berikut script contohnya:

<!DOCTYPE HTML>

<html>
<head>
<style>
#teks {
color: red
}
</style>

<title>HTML Pertamaku</title>
</head>

<body>
<h1>Selamat Datang Dunia HTML!</h1>
<p>Akhirnya saya bisa belajar HTML.</p>
<p>Dengan bantuan buku <b><i>"Step by Step HTML5"</i></b>
karangan Jubilee Enterprise

(diterbitkan oleh PT Elex Media Komputindo), belajar HTML


menjadi sangat mudah dan

sederhana.</p>

<h2>Langkah-Langkah Membeli Buku</h2>


<ol style="list-style-type: lower-alpha">
<li>Masuklah ke toko buku Gramedia
<li>Sebutkan identitas buku berikut:
<ul style="list-style-type: square">
<li><b>Judul</b>: Step by Step HTML 5
<li id="teks"><b>Penerbit</b>: PT Elex Media Komputindo

111
<li><b>Penulis</b>: Jubilee Enterprise
</ul>
<li>Pergilah ke kasir.
<li>Bayarlah buku tersebut.
</ol>

Style pada Hyperlink


Apa pun browser yang Anda gunakan, teks dengan hyperlink di
dalamnya memiliki wujud visual yang nyata, yaitu teks berwarna
biru dengan garis bawah. Apabila teks itu pernah diklik maka war-
na biru akan memudar menjadi ungu. Namun kini, kita temukan
link-link pada teks yang didesain secara kreatif, misalnya tidak
ada garis bawah dan tidak selalu berwarna biru.
Untuk membuatnya, Anda hanya membutuhkan style pada hyper-
link. Apabila Anda ingin mengontrol style pada link tunggal, maka
Anda bisa menggunakan contoh script di bawah ini:

<a href=”partner.html” style=”color: red”>Partner kami</a>

Jika script di atas dijalankan di dalam jendela browser, maka akan


muncul link berwarna merah. Anda juga bisa mengatur warna link
menggunakan Class seperti yang pernah kita pelajari di bagian
atas.
Berikut salah satu contoh script yang memanfaatkan Class untuk
pengaturan warna link:

<!DOCTYPE HTML>

<html>
<head>
<style>
.warnalink {
color: red
}
</style>

<title>HTML Pertamaku</title>
</head>

<body>
<h1>Selamat Datang Dunia HTML!</h1>
<p>Akhirnya saya bisa belajar HTML.</p>
<p>Dengan bantuan buku <b><i>"Step by Step HTML5"</i></b>
karangan Jubilee Enterprise

112
(diterbitkan oleh PT Elex Media Komputindo), belajar HTML
menjadi sangat mudah dan

sederhana.</p>
<p>Kunjungi <a href="http://www.thinkjubilee.com"
class="warnalink">Official Site </a>Jubilee

Enterprise untuk info lebih lanjut</p>


<hr>

<p>Copyright &copy; PT Elex Media Komputindo &trade;</p>

</body>
</html>

Sajian link dengan menggunakan class

Pada contoh script di atas, link akan berwarna merah dan dengan
garis bawah pula.
Khusus untuk style pada hyperlink, HTML memiliki istilah khas
yang bernama pseudo-classes. Pseudo-classes adalah class yang
memiliki variable tertentu. Dalam konteks hyperlink, style untuk
link terdiri dari empat macam. Yang pertama adalah style untuk
link yang belum pernah diklik. Yang kedua, link yang sudah
pernah diklik. Yang ketiga adalah link yang sedang aktif, yaitu link
yang baru saja diklik. Yang keempat adalah link yang berubah
bentuk apabila kursor mouse berada di atasnya.

113
Keempat macam link itu dijelaskan dalam pseudo classes berikut:
• Link: Menentukan style pada sebuah link yang belum per-
nah diklik.
• Visited: Menentukan style pada link yang pernah diklik.
• Hover: Menentukan style pada link apabila kursor mouse
melintasi link tersebut.
• Active: Menentukan style pada link apabila link itu baru
saja diklik.

Untuk menulis pseudo-classes di atas, Anda bisa menggunakan


kode berikut:

<style type="text/css">
a.warnateks:link {color: yellow}
a.warnateks:visited {color: green}
a.warnateks:hover {color: black}
a.warnateks:active {color: aqua}
</style>

Agar membantu Anda memahami bagaimana pseudo-classes itu


memengaruhi desain situs Anda, tulislah script di bawah ini:

<!DOCTYPE HTML>

<html>
<head>
<style type="text/css">
a.warnateks:link {color: yellow}
a.warnateks:visited {color: green}
a.warnateks:hover {color: black}
a.warnateks:active {color: aqua}
</style>

<title>HTML Pertamaku</title>
</head>

<body>
<h1>Selamat Datang Dunia HTML!</h1>
<p>Akhirnya saya bisa belajar HTML.</p>
<p>Dengan bantuan buku <b><i>"Step by Step HTML5"</i></b>
karangan Jubilee Enterprise

(diterbitkan oleh PT Elex Media Komputindo), belajar HTML


menjadi sangat mudah dan

sederhana.</p>

114
<p>Kunjungi <a class="warnateks"
href="http://www.thinkjubilee.com">Official Site </a>Jubilee

Enterprise untuk info lebih lanjut</p>


<p>Kunjungi <a class="warnateks"
href="http://www.elexmedia.com">Elex Media</a>.</p>
<hr>

<p>Copyright &copy; PT Elex Media Komputindo &trade;</p>

</body>
</html>

Tampilan script menggunakan pseudo-classes

Cobalah mengarahkan kursor mouse di atas link “Elex Media” di


atas. Warnanya pun akan berubah. Klik link itu, warnanya pun
akan berubah juga.

Pseudo-Classes untuk Tag Lain


Sebenarnya, pseudo-classes tidak hanya terbatas untuk hyperlink
saja. Kita bisa mengambil manfaat lain dengan menggunakan
sifat-sifat pseudo-classes untuk tag lain. Misalnya saja kita pilih
“hover”. Secara umum, hover berfungsi untuk mengganti atau
menciptakan format tertentu apabila kursor mouse melintasi
elemen yang ada di dalam jendela browser.

115
Bagaimana kalau kita letakkan “hover” ini pada tag paragraf?
Skenarionya, jika kursor mouse melintasi sebuah paragraf, akan
ada efek khusus yang muncul. Misalnya, paragraf itu menjadi
berwarna terang.
Cobalah tulis script di bawah ini:

<!DOCTYPE HTML>

<html>
<head>
<style type="text/css">
p.warnaparagraf:hover {color: black; background: yellow;
border: medium solid orange;}
</style>

<title>HTML Pertamaku</title>
</head>

<body>
<h1>Selamat Datang Dunia HTML!</h1>
<p>Akhirnya saya bisa belajar HTML.</p>
<p class="warnaparagraf">Dengan bantuan buku <b><i>"Step by
Step HTML5"</i></b> karangan

Jubilee Enterprise (diterbitkan oleh PT Elex Media


Komputindo), belajar HTML menjadi sangat

mudah dan sederhana.</p>

<p>Kunjungi <a class="warnateks"


href="http://www.thinkjubilee.com">Official Site </a>Jubilee

Enterprise untuk info lebih lanjut</p>


<p>Kunjungi <a class="warnateks"
href="http://www.elexmedia.com">Elex Media</a>.</p>
<hr>

<p>Copyright &copy; PT Elex Media Komputindo &trade;</p>

</body>
</html>

Pada gambar di atas tampak bahwa ketika mouse melintasi se-


buah paragraf, paragraf itu langsung “menyala” terang. Warna itu
dipicu menggunakan pseudo-classes hover.

116
Gambar 6.6. Hover yang diletakkan pada paragraf

Style yang Diletakkan di File


Terpisah
Pada contoh-contoh di atas, kita belajar menciptakan style yang
ditulis menyatu dengan script HTML. Walaupun praktis untuk
script HTML tunggal namun akan sangat merepotkan untuk script
HTML massal. Kabar buruknya adalah, sebuah website yang
komplit terdiri dari puluhan atau bahkan ratusan script HTML. Jika
terjadi perubahan pada style salah satu script HTML maka untuk
menghasilkan output yang sama, kita juga harus mengubah style
pada ratusan script HTML lainnya.
Solusi praktisnya adalah dengan meletakkan style pada script ter-
pisah dan kemudian memadukannya ke dalam script HTML
memakai tag khusus. Dengan demikian, jika style akan diubah
maka cukup mengubah satu file script saja dan nanti semua script
HTML yang terkait dengannya akan ikut berubah.
Berikut aturan-aturannya:
1. Buatlah script style itu dan simpanlah dengan ekstensi .css.

117
2. Tidak perlu membuat two-sided tag <style>.
Sebagai contoh, bukalah Notepad dan tulislah script di bawah ini:

h1 {
color: blue;
font-size: 16px;
}

ul {
list-style-type: square
}

p.warnaparagraf:hover {color: black; background: yellow;


border: medium solid orange;}

a.warnateks:link {color: yellow}


a.warnateks:visited {color: green}
a.warnateks:hover {color: black}
a.warnateks:active {color: aqua}

Setelah itu, simpanlah dalam ekstensi .css. Misalnya, simpan


dengan nama “style.css”.
Kalau sudah, setiap kali Anda membuat script HTML dengan me-
libatkan style-style di atas, cukup gabungkan file style.css ke
dalam script HTML Anda menggunakan tag <link>. Letakkan tag
ini di area <head>…</head>. Penulisannya sebagai berikut:
<link rel=”stylesheet” type=”text/css” href=”style.css”>

Berikut contoh script tersebut:

<!DOCTYPE HTML>

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</link>
<title>HTML Pertamaku</title>
</head>

<body>
<h1>Selamat Datang Dunia HTML!</h1>
<p>Akhirnya saya bisa belajar HTML.</p>

<p class="warnaparagraf">Dengan bantuan buku <b><i>"Step by


Step HTML5"</i></b> karangan

Jubilee Enterprise (diterbitkan oleh PT Elex Media


Komputindo), belajar HTML menjadi sangat

118
mudah dan sederhana.</p>

<p>Kunjungi <a class="warnateks"


href="http://www.thinkjubilee.com">Official Site </a>Jubilee

Enterprise untuk info lebih lanjut</p>


<p>Kunjungi <a class="warnateks"
href="http://www.elexmedia.com">Elex Media</a>.</p>

<h2>Rancangan Daftar Isi:</h2>


<ul>
<li>Mengenal HTML
<li>Formatting Text
<li>Hyperlink
<li>Graphic dan Image Map
</ul>

<hr>

<p>Copyright &copy; PT Elex Media Komputindo &trade;</p>

</body>
</html>

Simpanlah script di atas dalam format HTML seperti biasa dan


jalankanlah menggunakan Internet Explorer atau browser pilihan
Anda. Bermain-mainlah dengan tampilan yang tersaji di layar
browser Anda.

Style yang dipisahkan dengan script HTML


***

119