1. Selector Tag
2. Selector Class
3. Selector ID
4. Selector Atribute
5. Selector Universal

Selector Tag
Selector ini memilih element HTML berdasarkan nama tag sehingga disebut Type Selector. contohnya seperti dibawah :

p {
  color: green;
  font-size: 25px;
}

Pejelasannya adalah ubah semua Tag <p> lalu atur warnanya menjadi warna hijau dan ubah semua ukuran tag <p> menjadi ukuran 25pixel.

Selector Class
Selector ini memilih element HTML berdasarkan nama class yang diberikan (class adalah attribute didalam tag). Kalau di css selector class ini dibuat dengan tanda titik di depannya. contohnya seperti dibawah ini :

.red {
  color: red;
  background: yellow;
  padding: 10px;
}

kita berinama selector class bernama .red . untuk menggunakan selector ini dihtml kita wajib menambahkan attribute class didalam tag.

Selector ID
Selector ini sekilas mirip seperti css. Bedanya ID hanya boleh digunakan oleh satu element HTML saja sehingga bersifat unik. Selector ID juga ditandai dengan tanda pagar didepannya seperti contoh dibawah ini :

#header {
  background: lightblue;
  color: white;
  height: 120px;
 padding: 100px;

}

Kita beri nama selector ID bernama #header. Laluuntuk menggunakan selector ini pada html, kita wajib menambahkan attribute ID didalam tag.

Selector Attribute
Selector ini memilih element HTML berdasarkan atribut. Selector ini hampir sama seperti Selector Tag, namun terdapat perbedaan yaitu selector ini juga memilih attribut dengan contohnya seperti dibawah

ini :

input {
background: none;
color: brown;
width: 30%;
border: 1px solid blueviolet;
padding: 5px;
}
input[type=text] {
background: none;
color: blue;
width: 50%;
padding: 20px;
border: 1px solid blue;
}

Pertama kita hanya menuliskan selector tag pada tag <input>, kemudian kedua kita tetap ketik kan selector tag tapi dengan ditambahkan dengan selector attribute yaitu dengan menambahkan [nama_attribute=value].

Selector Universal
Selector ini digunakan untuk menyeleksi semua tag HTML pada jangkauan (scope) tertentu atau seluruh halaman HTML. Berikut ini adalah contohnya :

* {
border: 4px solid blue;
}
p {
 color: green;
}

Penjelasan source code diatas :

• * (Bintang Asterisk):Maksud dari tanda bintang (*) adalah memilih semua elemen di halaman HTML. Dalam hal ini, ini akan mempengaruhi setiap elemen di halaman web.
• {} (Kurung Kurawal):Kurung kurawal mengapit serangkaian deklarasi properti gaya.
• border: 4px solid blue;:Ini adalah deklarasi gaya yang diterapkan ke semua elemen. border: Menetapkan gaya garis batas. 4px: Menetapkan ketebalan garis sebesar 4 piksel. solid: Jenis garis adalah solid (garis utuh, tidak putus-putus). blue: Warna garis adalah biru.
• p{ color:green : mengubah warna pada tag p menjadi warna hijau.