Cara
Kerja cascading style sheet
Cara kerja
CSS dimulai saat deklarasi style yang diinginkan dengan menulis style
(selektor, id dan class), maka secara otomatis style tersebut akan
bekerja
pada dokumen HTML. Dengan mengatur
selektor, id, dan class,
untuk
kemudian id dan class tersebut kita sesuaikan dan terapkan pada
kode HTML
. Dan secara otomatis pula CSS itu akan bekerja pada file
HTML.
Pendefinisian style bisa dilakukan pada tag <style>. Di dalam pasangan tag tersebut,
pendefinisian style dilakukan dengan bentuk Selector
{ … } . Dalam hal ini, selector bisa berupa
selector HTML, selector kelas, atau selector ID.
Selector HTML mendefinisikan
style bagi suatu tag HTML. Contoh di depan menggunakan selector HTML beruma
img. Bentuk umumnya :
Contoh :
Nama-elemen { … }h:
Contoh :
Img { Margin-topi: 10px; Float: left; }
Selektor class mendefinisikan kelas yang
bisa berlaku untuk
sebarang
tag HTML. Bentuknya:
Contoh :
.nama-class { … }
Contoh :
.kotak { Border: solid; }
Selector ID
mendefinisikan style bagi elemen yang memiliki ID sesuai
yang tercantum dalam selector. Bentuknya:
#id { … }
Contoh :
#inggris { Font-weight:bold;Font-size:1.2em;}
Berikut contoh yang menggunakan selector class dan
selector ID dapat dilihat di bawah ini.
<html>
<head>
<tittle>Contoh selektor kelas dan ID</tittle>
<style type=”text/css”>
.kotak { Border: solid; Padding: 5px; }
#jawa { Background-color: #ccff66; /*
latarbelakang */}
#inggris { Font-weight: bold; Font-size:
1.2em; }
</style>
</head>
<body>
<div id=”Indonesia” class=”kotak”>Selamat pagi
!</div>
<div id=”jawa”>Sugeng enjing !</div>
<div id=”inggris” class=”kotak”>Good morning
!</div>
</body>
</html>
