Nggak mau ketinggalan artikel baru Blogger-Holic? Subscribe Sekarang
Hot Categories: Blogger News | Hack | SEO | Tips | Tutorial | more

Perbedaan Class dengan ID

7.1.09 | 19 comments

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

19 comments:

  1. wah sangat bermanfaat sekali nih..iya lama banget ga bercuap-cuap semoga UN mu lulus dengan baik :D

    ReplyDelete
  2. Wah, cara penyampaiannya bagus banget, mas Fariz!

    Oh ya, moga bisa menghadapi UN dgn sebaik-baiknya! ;)

    ReplyDelete
  3. @ pencuri kode™ dan Syahuri: makasih ya mas.. aminn, semoga UN saya sukses :D

    ReplyDelete
  4. kalau aku pakai wordpress

    ReplyDelete
  5. o gitu toh,.asli sya bru tau perbedaannya,., pantesan klo lg iseng utak atik blogspot id mesti unik dan klo make class yg sama gpp,,.thanks mas,.,

    sukses buat UN dan bloggingnya,.,amin,.,

    ReplyDelete
  6. @ faishal arif: kode HTML bisa dipake di Blogger maupun Wordpress koq rif :)

    @ mas khotib: makasih mas :D

    ReplyDelete
  7. Oh gitu
    NICE INFO
    makasie bang
    akhirnya saya tahu tentang class ma ID
    gitu tho
    abiesnya cuman nerapin trik ma tips blogging tapi kadang bingung maksudnya apaan
    sedikit pendalaman tentang class dan ID ne
    :P
    makasie bang INPHONYA
    Glad To be HEre

    ReplyDelete
  8. @ AndriRistiawan: hhehe..sama2 bang :D

    ReplyDelete
  9. Eh... maksudnya?
    Aduh ga mudeng nih maklum agak ndeso :P

    Anywey salam kenal :)

    ReplyDelete
  10. sip triknya bos,
    thx

    ReplyDelete
  11. oohh...gitu toh..........
    makasih yah.......................
    salam knal yah bro......
    aq soalnya baru di dunia maya ni
    makanya banyak istilah yang terkadang aq kagak paham

    ReplyDelete
  12. Haduuuh. Pusing Gw. Mo ngedit banyak tapi template baru third-party ini malah nyusahin.

    Btw, Thank's artikelnya.

    ReplyDelete
  13. makasih, jadi enak sekarang buat desain layout website :D

    ReplyDelete
  14. Oh gitu ya gan.. thanks..

    ReplyDelete
  15. class lebih dari satu dalam hal apa? Apa satu elemen misalnya h1,diisi dua class?

    ReplyDelete
  16. iya mas..
    jadi tag-tag html spt h1, a, img, dll itu bisa diisi oleh banyak class
    misal ada 3 class
    .satu{}
    .dua{}
    .tiga

    nah tiga2 nya bisa dimasukan ke tag tsb, dgn <h1 class="satu dua tiga">blogger-holic</h1> :)

    ReplyDelete
    Replies
    1. wah makasih banyak atas penjelasannya mas...sekarang baru ngeh...:)

      Delete
    2. Waduh, baru sadar n ngertos dengan jelas n clear apa itu css apa itu id :D

      Delete
  17. thanks atas penjelasannya ,
    visit back my blog : www.arissaryanto.net

    ReplyDelete