ID Selector dan Class

Selain dengan cara standar dalam penulisan CSS yaitu memberi style atau properti pada selector bawaan HTML, kita juga dapat memberikan nama sendiri pada suatu elemen tertentu dengan cara membuat ID Selector dan Class Selector.

ID Selector adalah selector yang dapat digunakan hanya satu kali pada suatu elemen, sedangkan Class Selector dapat digunakan beberapa kali pada suatu elemen.

Penulisan ID Selector pada CSS diawali dengan simbol # (octothorpe) sedangkan penulisan Class Selector pada CSS diawali dengan tanda titik (.)

Contoh:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>ID Selector dan Class</title>
<style type=”text/css”>
.box {border:2px solid #666666; padding:10px; margin-bottom:10px;}
#header_title {font-size:24px; color:#FF0000; text-transform:uppercase; text-align:center}
#header_desc {font-size:16px; color: #666600; text-transform:uppercase; text-align:center}
</style>
</head>
<body>
<div class=”box”>
<p id=”header_title”>Gus Dwi&acute;s Blog<br/><span id=”header_desc”>Tentang CSS tutorial</span></p>
</div>
<div class=”box”>
<p>Isi keterangan tentang Blog anda disini</p>
</div>
</body>
</html>

Kalau dilihat pada browser akan menjadi seperti ini:
id-selector-view

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *