Mengetahui Perbedaan ID dan Class pada CSS

5/5 (44)
Perbedaan ID dan CLASS pada CSS
Perbedaan ID dan CLASS pada CSS

Mengetahui Perbedaan ID dan Class pada CSS – Dalam HTML, ada yang namanya selector. Ada yang sudah default, yaitu bawaan dari pembuat & pengembangnya. Namun kalian juga bisa membuat selector sendiri. Ada dua jenis selector pada HTML, yaitu  ID dan Class. Pada tulisan kali ini kita akan memahami perbedaan ID dan Class pada CSS.

Baca juga: Mengapa Belajar Python?

Ketika kita membuat elemen <div>, maka ada saatnya kita menggunakan id tag <div id="namadiv"> , dan ada kalanya saat kita menggunakan class tag <div class="namadiv">. Apa  beda di antara keduanya?

Perbedaan ID dan Class pada CSS

ID

ID merupakan selector yang digunakan oleh satu tag html, ini adalah yang disarankan, karena ID itu sendiri hanya boleh digunakan untuk satu tag html.

  • Setiap elemen hanya dapat memiliki satu tag id.
  • Dalam satu halaman tidak boleh ada dua penamaan id yang berbeda

Jangan sampai kita menggunakan penamaan id lebih dari satu kali dalam satu penyajian halaman website. Apabila kalian mau coba, kalian boleh saja menamakan dua elemen dengan tag id yang sama, lalu akan kalian temukan salah satu dari elemen tersebut akan menolak setting CSS yang kalian berikan.

Contoh penulisan:

#box-codelatte {
text-decoration: none;
border: none;
border-style: none;
box-shadow: none;
}

Penggunaan nya pada HTML:
<div id="box-codelatte"></div>

CLASS

Class merupakan selector yang dapat kita digunakan oleh lebih dari satu tag html. Artinya beberapa tag html bisa menggunakan css dari class tersebut.

  • Tag class dengan nama yang sama dapat dipakai berulang-ulang pada satu halaman.
  • Satu elemen boleh memiliki lebih dari satu Class yang berbeda-beda.

Apabila kalian memiliki elemen yang banyak dan ingin menerapkan styling yang sama untuk setiap objek atau elemen tersebut, gunakan tag class.

Contoh penulisan:

#p-codelatte {
text-decoration: none;
font-size: 14pt;
}

Penggunaan nya pada HTML:
<div class="p-codelatte">

Saya kira cukup untuk Perbedaan ID dan Class pada CSS, semoga bermanfaat dan sampai jumpa di artikel berikutnya.

Kalian punya template portfolio keren yang ingin kalian publikasikan? Submit karya kalian di Codelatte Archive. Code Archive menyediakan media untuk ide kreatif berupa portfolio dari desainer & developer yang tidak kalah kreatif pula.

Please rate this

Abay

Cheers, I am Abay and I make things for fun. Gudang Garam and Coffee i can't live without. I love turning exciting ideas into horrible code. And .. i'm a lil' boy currently living Indonesia. Want to buy me a coffe? Let's talk, abay@codelatte.org

2 tanggapan untuk “Mengetahui Perbedaan ID dan Class pada CSS

  • 14 Juli 2018 pada 1:52 AM
    Permalink

    Awalnya, saya kira penggunaan tanda (#) dan (.) didepan code CSS tidak ada perbedaannya XD
    Ternyata, code itu yang menentukan apakah code tersebut adalah ID atau Class. Terima kasih untuk Ilmu-nya mas

    Balas
  • 9 Agustus 2018 pada 12:01 AM
    Permalink

    You ought to take part in a contest for one of the most useful
    blogs on the net. I will recommend this blog!

    Balas

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *