Mengetahui 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:
[css]
#box-codelatte {
text-decoration: none;
border: none;
border-style: none;
box-shadow: none;
}[/css]
Penggunaan nya pada HTML:
[html]

[/html]

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:
[css]
#p-codelatte {
text-decoration: none;
font-size: 14pt;
}[/css]
Penggunaan nya pada HTML:
[html]

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.