Selector CLASS dan ID di CSS

Apa itu Class ?

Apa itu ID ?

Pengertian Class

Pengertian ID

HTML memiliki sebuah atribut yang spesial yakni ID dan Class kedua atribut ini sering di gunakan sebagai identifier yang bisa di gunakan oleh perintah css sebagai Selector.

Atribut ID di CSS

Atribut Id bisa di gunakkan sebagai identitas suatu elemen html. penggunaan atribut Id dalam dokumen html hanya di izinkkan ada satu nilai Id yang unik. jika dalam suatu dokumen html terdpat dua nilai ID yang sama, maka atribut ID yang pertama saja yang aktif, sedanggkkan ID yang lain tidak dapat di akses.
syarat penggunaan ID dalam dokumen html harus unik.

Syntax atribut ID dalam dokumen html sebagai berikut:

<p Id="nilaiID">contoh Atribut id</p>

Untuk menggunkan atribut id sebagai selector di css, perhatian contoh program di bawah ini:

Contoh atribut id sebagai lelector di CSS

 <html>
 <head>
 <title></title>
 <style type="text/css">

 #p1{
 color:red;
 background:blue;
 }
 
 </style>
 </head>
 <body>

 <p id="p1"> ini paragraf dengan atribut id</p>
 <p>ini paragraf tanpa atribut id</p>

 </body>
 </html>

Contoh program di atas terdapat dua element dengan tag p dan tag p yang pertama memiliki ID p1. untuk penggunaan ID sebagai selector CSS di tandai dengan karakter pagar (#), seperti contoh di atas #p1 di set sebagai selector untuk dapat mengakses elemen p.

Atribut Class di CSS

Atribut class dalam html di gunakan sebagai pengelompokan elemen yang akan di atur secara bersamaan. berbeda dengan atribut ID yang notabenya hanya di izinkan ada satu id unik di satu dokumen html, atribut class bisa di pakai berkali-kali dengan nilai class yang sama, karena fungsi class sendiri mengelompokkan elemen yang memiliki class yang sama dan modifikasi secara bersamaan.

Untuk penggunaan atribut ID sebagai selector di CSS, perhatikan contoh program html sederhana di bawah ini:

Contoh atribut class sebagai selector di CSS

<html>
 
 <head>
 
 <title></title>
 
 <style type="text/css">
 
 .p1{
 
 color:red;
 
 background:blue;
 
 }
 
 </style>
 
 </head>
 
 <body>
 
 <p class="p1">contoh tag dengan Class p1</p>
 
 <p class="p1">contoh tag dengan Class p1</p>
 
 </body>
 
 </html>

Contoh program di atas, kita memiliki dua elemen dengan tag p dan memiliki class yang sama. tanda dari suatu class yang menjadi selector CSS, di tandai adanya karakter titik (.) sebelum nama classnya.

ZenTutorials