DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja

Logo Koala Skodev mengetik

Skodev

Belajar coding dalam bahasa Indonesia

SELEKTOR CSS DAN HTML

Ada banyak cara untuk memilih elemen HTML mana yang ingin dihias. Pelajari tentang selektor CSS

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
👈🏼 Struktur penulisan CSS
Warna tulisan CSS 👉🏼