Perbedaan Class dengan ID

Rasanya udah lama ngga bercuap-cuap di blog ini. Menjelang UN ini, saya jadi susah ngupdate blog soalnya kegiatan ngeblog saya ini harus sedikit dikurangi agar saya bisa fokus nyiapin UN. Jadi, saya mohon maaf kalo komentar atau pesan di shoutbox belum sempat saya balas.. ;)

Okay, let's straight to the topic..

Terkadang kita suka bingung apa bedanya Class dengan ID. Atau kita juga bingung, kapan saat yg tepat buat make Class atau ID. Seenggaknya masalah tadi terjadi pada saya. Yup, belakangan ini saya dibingungin sama 2 hal ini >.<

Class.
Kita menggunakan Class supaya tampilan HTML elemen dapat sesuai dengan style2 yang tersimpan di dalam kode CSS. Misalnya, kita ingin suatu elemen tertentu memiliki ukuran font yg besar dan berwarna hitam, kita hanya perlu menambahkan style2 tadi ke dalam kode CSS. Lalu apa guna Class di sini? Class berguna untuk membuat suatu elemen dapat terlihat beda dari elemen normal sesuai dengan atribut style Class yang ada dalam kode CSS.

Penggunaanya simple banget. Pertama tentukan dan masukan atribut yg diinginkan ke dalam kode CSS. Contohnya seperti ini:

.satu{ color: blue; }
.dua{ color: red; }

Kalo kamu masukin ke HTML Elemen Blogger kode HTML nya begini:

<p>Paragraf normal tanpa style apapun.</p>

<p class="satu">Paragraf yg menggunakan kode CSS .satu!</p>
<p class="dua">Paragraf yg menggunakan kode CSS .dua!</p>

Lalu hasilnya akan seperti ini:

Paragraf normal tanpa style apapun.

Paragraf yg menggunakan kode CSS .satu!

Paragraf yg menggunakan kode CSS .dua!

Kita bisa menggunakan Class yg sama berulang-ulang tanpa ada batas penggunaan sehingga bisa memudahkan apabila ada beberapa elemen dengan style yg sama.


ID.
Lalu apa itu ID..?? ID hampir sama dengan Class. Hanya saja, ID dapat membuat suatu elemen tsb lebih unique dengan style-nya daripada elemen2 lainnya.

Penggunaannya juga tidak jauh berbeda. Sama seperti Class, pertama tentukan dan masukan atribut yg diinginkan ke dalam kode CSS.

#satu{ background-color: black;color:white }
#dua{ text-decoration:underline; }

Kalo kamu masukin ke HTML Elemen Blogger kode HTML nya begini:

<p>Paragraf normal, tanpa style apapun.</p>

<p id="satu">Paragraf yg menggunakan kode CSS #satu!</p>
<p id="dua">Paragraf yg menggunakan kode CSS #dua!</p>

Lalu hasilnya akan seperti ini:

Paragraf normal, tanpa style apapun.

Paragraf yg menggunakan kode CSS .satu!

Paragraf yg menggunakan kode CSS .dua!

Fungsi keduanya memang sama, yaitu menampilkan elemen HTML sesuai atribut stylenya di dalam kode CSS. Tetapi, ada beberapa hal yg perlu kita ketahui dari keduanya:

1. Class dapat dipakai berulang kali, sedangkan ID hanya dapat dipakai sekali. Kita tidak akan bisa menggunakan ID yg sama utk 2 elemen berbeda.

2. Pada kode CSS, nama Class didahului oleh titik ( . ), sedangkan ID didahului simbol pagar ( # ).

3. Kita bisa memakai lebih dari 1 Class pada sebuah elemen sedangkan ID tidak bisa. Seperti yg kita tahu, ID hanya bisa dipakai 1 elemen pada suatu halaman. Contohnya pemakaian 2 Class, seperti ini:

<p class="satu dua">

.satu { font-weight: bold; }
.dua { padding-left: 2em; }

4. Karena keunikan sebuah elemen ID, maka kita bisa membuat link '#nama_ID'. Contohnya begini:

<a href="#satu" >

maka link tsb akan otomatis membawa kita ke elemen HTML dgn ID satu pada halaman yg sama. Hal ini bisa berguna saat kita ingin membuat link Back to Top.

Semoga bermanfaat ;)


referensi:
tizag.com
maxdesign
HTML Dog