CSS berisi sekumpulan selektor yang masing-masing memiliki beberapa properti dengan nilainya masing-masing. Selector css bisa berupa nama tag, class, atau id. Penulisan masing-masing jenis selector tersebut dibedakan berdasarkan awalannya.
Tag <p> ketiga dan keempat pada kode HTML di atas menggunakan nama class. Selector CSS-nya diawali dengan titik (.). Ini berbeda dengan paragraf kelima yang menggunakan Id. Selector untuk Id diawali dengan tanda pagar (#). Satu nama Id sebaiknya hanya digunakan satu tag.
- Nama Tag : Selector untuk tag HTML ditulis sesuai nama tagnya tanpa tanda < dan >. Semua tag yang sama akan berubah sesuai dengan nilai dari masing-masing properti.
- Atribut Id : diawali dengan tanda hash / pagar (#). Nama Id sebaiknya unik. Kalian tidak seharusnya menggunakan nama Id yang sama dalam satu kode HTML.
- Atribut Class diawali dengan tanda titik (.). Satu file HTML bisa menggunakan beberapa class yang sama.
Penulisan selector selalu diawali dengan pola di atas, kecuali untuk universal selector (*). Contoh nama selector yang lain misalnya a[attribute], .nama_class:link, #nama_id::before, dll.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
h2{
color : green;
}
p{
color : red;
}
</style>
</HEAD>
<BODY>
<h2>Judul</h2>
<p>paragraf 1</p>
<p>paragraf 2</p>
</BODY>
</HTML>CSS pada contoh kode HTML di atas hanya mengubah warna dari tag <h2> dengan menggunakan properti color. Selector yang menggunakan nama tag cukup ditulis sesuai nama tagnya sebelum tanda kurung kurawal. Properti dari selector perlu diapit dengan tanda kurung kurawal ( { .... } ).
Class dan Id
Penulisan nama selector berdasarkan nama tag disebut dengan "type selector". Selain berdasarkan nama tag, selector juga bisa menggunakan nama class dan id.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
#paragrafku{
color : blue;
}
.paragrafku{
color: red
}
</style>
</HEAD>
<BODY>
<h2>Judul</h2>
<p>paragraf 1</p>
<p>paragraf 2</p>
<p class= "paragrafku">paragraf 3</p>
<p class= "paragrafku">paragraf 4</p>
<p id = "paragrafku">paragraf 5</p>
</BODY>
</HTML>