Sebelum membahas mengenai selector, ada baiknya kita mengetahui lebih dahulu Macam-macam penggunaan CSS. Untuk dapat menggunakan css secara maksimal, tentunya harus tau jenis-jenis selector, berikut cara penggunaanya. Jenis selector seperti ini hanya berlaku untuk External dan Embedded style sheet.
» Selector bebas
Cara penggunaan selector bebas mirip seperti penggunaan tag di HTML, hanya saja selector menggunakan nama yang bisa kita atur sendiri sesuai keinginan. Bentuk umunya seperti ini :
<style type=”text/css”>
testing{ text-decoration: underline; color:green; }
</style>
Untuk dapat menggunakan style ini, dalam dokumen harus di tulis seperti ini :
<testing>Teks ini berwarna hijau dan bergaris bawah</testing>
» Selector dengan class
CSS memperbolehkan kita untuk memakai class, dimana didalam sebuah class kita dapat mengelompokkan elemen-elemen dan menerapkan aturan CSS didalamnya. Bingung dengan penjelasan ?. Sama, saya juga. Oke, biar ngga’ sama-sama bingung, langung liat contoh berikut :
<style type=”text/css”>
.toplink { text-align : right; }
</style>
Nah, berbeda dengan selector pertama, dalam dokumen penulisannya jadi seperti ini :
<h2 class=”toplink”>Class Heading 2 </h2>
Heading 2 ( h2 ) di dalam kode di atas bukan suatu harga mati, h2 bisa saja diganti dengan tag-tag lain sesuai keinginan. Tergantung tag mana yang akan di atur untuk menggunakan style toplink dalam css di atas.
» Selector id
Berikut ada namanya selector id. Kalau selector dengan class diawali dengan titik, selector id menggunakan tanda pagar. Contoh penulisannya seperti ini :
<style type=”text/css”>
#title { font-size: 10px; text-transform:uppercase; color: red; }
</style>
Penulisannya dalam dokumen tidak jauh berbeda dengan selector class. Hanya saja tulisana “class” kita ganti dengan “id”. Contoh :
<p id=”title”>Tulisan ini berukuran 10, kapital dan berwarna merah</p>
