Dengan class selector kita dapat mendefinisikan perbedaan style untuk tag elemen HTML yang sama. Misalnya dua type paragraf, paragraf pertama menggunakan align-left dan yang satu lagi menggunakan align-center.
Contoh penggunaan atribut class di dalam HTML:
<p class="left">Paragraf rata kiri</p>
<p class="center">Paragraf rata tengah</p>
//maka penulisan pada file CSS-nya menjadi:
.left{text-align:left}
.center{text-align:center}
<p class="center">Paragraf rata tengah</p>
//maka penulisan pada file CSS-nya menjadi:
.left{text-align:left}
.center{text-align:center}
keterangan:
- pada penulisan nama class dalam file CSS diawali dengan tanda titik (.)
- Tidak dianjurkan memberi nama class dengan angka
- Nama class tidak boleh menggunakan spasi, jika nama class lebih dari dua suku kata yang diberikan adalah tanda hubung (-) atau (_)
2. ID Selector
ID selector digunakan dengan tujuan mendefinisikan per-elemen dasar. Setiap halaman ID selector hanya boleh digunakan dengan satu ID unik, itulah yang menjadi perbedaannya dengan clsass selector. Di ID selector kita hanya diperbolehkan memanggil satu ID untuk satu elemen yang sama.
Contoh:
<p id="tebal">
Paragraf ini ditulis dengan huruf tebal dan warna merah
</p>
<p id="miring">
Paragraf ini ditulis dengan huruf miring dan warna biru
</p>
//maka penulisan CSS-nya menjadi:
#tebal{font-weight:bold; color:red;}
#miring{font-style:italic; color:blue;}
Paragraf ini ditulis dengan huruf tebal dan warna merah
</p>
<p id="miring">
Paragraf ini ditulis dengan huruf miring dan warna biru
</p>
//maka penulisan CSS-nya menjadi:
#tebal{font-weight:bold; color:red;}
#miring{font-style:italic; color:blue;}
Keterangan:
- Pada penulisan nama id dalam file css diawali dengan tanda pagar (#)
- Nama id ditulis dengan angka, huruf atau garis bawah (_)
- Karakter pertama sebaiknya huruf atau garis bawah (_)