Selector Class dan ID dalam CSS di Blog

Perbedaan dan cara menggunakan Selector Class dan ID dalam CSS. Dalam penerapan CSS ke dalam kode html, kita memerlukan yang namanya Selector Class atau ID. Class dan ID yang sering kita temui dalam setiap elemen website sebenarnya dapat diartikan sebagai variabel, yaitu sebuah nama yang mempunyai isi atau nilai, atau bisa juga diartikan sebagai nama dari elemen, ya walaupun ada sendiri property “Name” yang khusus mengatur nama dari elemen tersebut.

Class

Class merupakan selector yang dapat  digunakan oleh lebih dari satu tag html. Artinya beberapa tag html bisa menggunakan css dari class tersebut. Contohnya:

CSS

.judul{font-size:20px;  color:orange;}

HTML

<h1 class=”judul”>BAB IV</h1>
<div class=”judul”>BAB V</div>

Contoh lain:

Pada contoh kode CSS dibawah ini, elemen dengan selector Class “sidebar” menggunakan float left; dan background: white;. Kode CSS tersebut diterapkan pada selector “sidebar1” dan “sidebar2” karena kedua nya termasuk dalam grup class “sidebar”. Sedangkan properti CSS width:100px; hanya dikhususkan untuk Class “sidebar1” saja, begitu juga dengan properti CSS width: 200px; hanya dikhususkan untuk Class “sidebar2”.

CSS

.sidebar{float: left; background: white;}
.sidebar1{width: 100px}
.sidebar2{width: 200px}

HTML 

<div class=”sidebar sidebar1″>Sidebar ke-1</div>
<div class=”sidebar sidebar2″>Sidebar ke-2</div>

Penulisan Class pada CSS diawali oleh “.” titik diikuti oleh selector Class nya.

ID

ID merupakan selector yang digunakan oleh satu tag html, ini adalah yang disarankan, karena ID itu sendiri hanya boleh digunakan untuk satu tag html.

CSS

#header{  backgroud-color:green;  width:900px; height:40px; }

HTML

<div id=”header”>Isi Konten</div>

 Penulisan ID pada CSS diawali oleh “#” pagar kemudian diikuti oleh selector ID nya.

Diposkan oleh

Brando Mewo

You Might Also Like: