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>