Ada banyak cara kita bisa menargetkan, elemen HTML mana yang ingin dihias. Berikut macam-macam selektor.

Selektor tag HTML

Kita bisa memilih elemen HTML dengan nama tagnya langsung.
Hiasan akan diaplikasikan langsung untuk semua tag HTMLnya.

Contoh

p {
 color: blue;
}

Berarti semua tag p yang ada di halaman, akan menjadi warna biru

Selektor dengan atribut id HTML

Memilih elemen mana yang dihias, bisa juga dengan atribut id pada tag HTMLnya.

Cara: masukkan nama id yang diawali dengan tanda pagar di antara tag style.

contoh

<!DOCTYPE html>
<html>
<head>
<style>
    #heading {
        background-color: lightblue;
        color: white;
    }
</style>
</head>
<body>
    <h1 id="heading"> Heading utama </h1>
    <h1> Heading lainnya </h1>
</body>
</html>

Heading utama

Heading lainnya

Hasilnya: hanya `h1` yang punya id `heading` yang terhias.

Selektor dengan atribut class HTML

Selain atribut id, menargetkan HTML bisa juga dengan atribut class pada tag HTMLnya.

Cara: masukkan nama class yang diawali dengan tanda titik (.) di antara tag style.

contoh

<!DOCTYPE html>
<html>
<head>
<style>
    .styled-box {
        background-color: orange;
        color: white;
    }
</style>
</head>
<body>
    <p> box 1</p>
    <p class='styled-box'> box 2</p>
    <p> box 3</p>
    <p class='styled-box'> box 4</p>
</body>
</html>

box 1

box 2

box 3

box 4

Hasilnya: hanya `p` yang punya class `styled-box` yang terhias