Belajar ID dan Class pada CSS

Class merupakan atribut HTML yang digunakan untuk mengelompokan elemen-elemen HTML walaupun berbeda nama tag sehingga mudah untuk mengatur bagaimana elemen-elemen itu ditampilkan menggunakan Style CSS. Sedangakan ID merupakan atribut HTML yang digunakan untuk mengkhususkan satu elemen dari elemen lain yang memiliki nama tag sama, sehingga CSS dapat menunjuk satu elemen diantara elemen yang sama.

Aturan Penggunaan ID pada Sebuah Dokumen HTML

• Nama ID hanya boleh menggunakan karakter huruf [ A-Z, a-z ] dan bisa diikuti angka [0-9], Penghubung [ - ], Underscores [ _ ], Titik dua [ : ], dan titik [ . ].
• Satu nama ID hanya dapat digunakan untuk satu elemen.
• Satu elemen hanya boleh memiliki satu ID.

Aturan Penggunaan Class pada Sebuah Dokumen HTML

• Nama Class dapat berisi semua karakter, namun harus di escape jika mengandung karakter HTML (sebaiknya gunakan nama standar).
• Satu nama class bisa digunakan pada banyak elemen.
• Satu elemen dapat memiliki lebih dari satu nama class dengan dispisahkan spasi.

Contoh penggunaan ID pada CSS

<div id="id_ku">Teks di dalam div</div>

Penulisan CSSnya:

#id_ku{
  color: red;
}

Atau dapat ditulis secara lengkap dengan nama tagnya:

div#id_ku{
   color: red;
}

Contoh Penggunaan Class pada CSS

<div class="class_ku">Teks di dalam div</div>

Penulisan CSSnya:

.class_ku{
  color: red;
}

Atau:

div.class_ku{
   color: red;
}

Tweet