Masih ingat kan pada pelajaran syntax CSS bagian pertama yang di
tulis adalah selector. Pada contoh-contoh di pelajaran sebelumnya, anda
melihat penggunaan tag HTML sebagai selector.
Misalkan anda membuat kode CSS untuk tag <h1>. Sekarang
bagaimana jika anda ingin memformat tag <h1> dengan warna /
property berbeda? Misalkan, anda ingin tag <h1> di kolom kiri
berwarna biru sementara tag <h1> di kolom tengah berwarna hitam.
Untuk kasus seperti ini, anda bisa menggunakan Class selector dan ID selector.
Class Selector
Class selector adalah penggabungan beberapa properties yang digunakan lebih dari satu kali.
Cara penulisan Class Selector:
.nama-class {property:value;}
Untuk menempelkan class ke dalam tag HTML:
taghtml.nama-class {Property:value;}
Perhatikan tanda titik di setiap awal nama Class. Jika anda ingin
menggunakan class selector di luar kode HTML anda menggunakan tag
<div class=nama-class> dan di akhiri dengan tag
</div>.
Contoh:
Penulisan kode CSS:
.tengah {text-align:center;}
p.tengah {color:red;}
h1.kiri {color:blue;}
h1.tengah {color:black;}
Pemakaian kode CSS
<div class=tengah>
<p>Teks tengah akan berwarna merah.</p>
<h1 > Tag H1 tengah akan berwarna hitam</h1>
</div>
<h1 class=kiri>Tag H1 kiri akan berwarna biru</h1>