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 H TML. 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;Fontsize:
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>
Tidak ada komentar:
Posting Komentar