dasar CSS (2) : Pengertian Class dan ID selector

Pada postingan sebelumnya temen-temen udah belajar mengenai selector, property dan value pada css, nah sekarang kita akan belajar mengenai ‘class dan id’.

Pengenalan Class

Class dalam css digunakan jika kita ingin memberikan lebih dari satu jenis style pada suatu tag html. Dalam hal ini, terdapat 3 jenis class yang bisa digunakan yaitu :

class, adanya selector yang diikuti dengan tanda titik (.) dan nama class-nya, lalu pendefinisian property dsan value nya.

selector.nama_class {property:value}

Untuk nama_class kamu bisa menggantinya sesuka kamu.

Generic class, tidak terdapat selector dan langsung diawali dengan tanda titik (.) dan nama class nya.

.nama_class {property:value}

berikut adalah contoh penggunaan dari class

<html>
<head>
<title>Perbedaan jenis class</title>
<style>
p.merah {color:red}

.warnabiru {color:blue}
</style>
</head>

<body>
<p>
Warna tulisan dalam paragraf ini akan mengikuti aturan style class yang telah ditentukan di atas, yaitu merah.
</p>
<p>
Warna tulisan dalam paragraf ini akan mengikuti aturan style class yang telah ditentukan di atas, yaitu biru.
</p>
<h3>
Warna tulisan heading ini akan berwana biru.
</h3>
</body>
</html>

Pseudo class, merupakan style built in yang telah ada pada aturan css dan didukung oleh beberapa browser. Nama class dari tipe ini sudah ditentukan jadi kita tidak bisa merubah-rubah nama class nya secara sembarangan.

selector:nama_c lass {property:value}

contoh penggunaan:

a:link{color:blue}
a:visited{color:purple}
a:hover(color:red}

Selector ID mirip dengan class, kita menggunakannya untuk membuat style pada setiap tag html.
Untuk membuat id, kita memakai tanda pagar (#) sebelum nama id-nya, berbeda dengan class yang memakai tanda titik (.) sebelum nama class-nya

#nama_id {property:value}

APA beda Class dengan ID?
Secara teori ID hanya bisa digunakan sekali saja dalam tag html,
 artinya jika suatu ID sudah dipakai dalam tag <div> (misal) maka pemakaian ID yang sama dalam tag html yang berikutnya akan diabaikan. Namun pada kenyataannya ID bisa digunakan berulang-ulang dalam tag html yang berbeda maupun yang sama, mirip dengan class generic.

Leave a Reply

Your email address will not be published. Required fields are marked *