Panduan Belajar ID Dan CLASS Pada CSS

Pengenalan ID dan Class Pada CSS

Selain menggunakan element html sebagai selector pada css, kita bisa menggunakan selector yang kita buat sendiri. Selector ini selanjutnya bisa kita pakai pada elemen-element dalam HTML dengan cara memanggilnya. Ada dua selector yang bisa kita buat yakni id dan class.

1. Selector ID

Selector id digunakan untuk menentukan style bagian unik dari html. Unik disini artinya satu nama id hanya bisa digunakan satu kali pada sebuah halaman web. Apabila satu nama ID digunakan lebih dari satu kali pada sebuah halaman, maka style hanya akan berlaku pada id yang pertama saja. Selector ID pada syntax CSS ditandai dengan “#”.

Contoh selector ID

1

#par1

2

{

3	text-align:center;

4	color:red;

5

}

Pada bagian dokumen HTML, untuk menggunakan style tersebut, misalnya pada sebuah paragraph, bisa dituliskan:

1	<p id="par1">Ini adalah sebuah paragraph</p>

Penulisan nama id sebaiknya tidak diawali dengan nomor, karena tidak akan dikenali pada browser Mozilla Firefox

2. Selector Class

Selector class digunakan untuk menentukan style dari sebuah group elemen. Berbeda dengan ID, selector class bisa dipakai berulangkali pada sebuah dokumen web. Artinya sebuah nama class dapat dipanggil beberapa kali pada elemen-elemen yang ada pada sebuah halaman web. Selector class dituliskan dengan ditandai dengan tanda titik “.” .
Contoh selector class

1

.komentar

2

{

3	text-align:left;

4	color:red;

5

}

Pada bagian dokumen web, misalnya akan diterapkan pada paragraph dan pada sebuh div dalam sebuah dokumen web yang sama, dapat dituliskan

1	<p class="komentar"> Ini adalah paragraph komentar </p>

1	<div class="komentar">Ini bagian komentar</p>

Bagian mana saja dari sebuah dokumen html yang memanggil class ini, akan memiliki style yang sama, yakni sesuai aturan tersebut, maka tulisan akan berada di tengah dan berwarna merah.  Pada kondisi lain, kita menginginkan apabila sebuah class hanya berlaku pada sebuah paragraph saja. Untuk bagian div tidak berlaku. Aturan tersebut bisa kita tuliskan sebagai berikut:

1	p.komentar {text-align:center;}

Aturan ini akan berlaku bagi setiap paragraph <p> yang memiliki class=”komentar” saja.