CSS Selector

Apa Itu Selector?

Selector digunakan untuk memilih elemen HTML mana yang ingin kamu atur dengan CSS. Dengan selector, kamu bisa memberi style pada elemen tertentu seperti paragraf, heading, tombol, dan lain-lain.

Struktur Penulisan CSS

CSS ditulis dalam bentuk aturan (rule), yang terdiri dari:

Selector —> elemen HTML yang akan diberi gaya
Property —> atribut tampilan yang ingin diatur
Value —> nilai dari properti tersebut

Contoh:

h1 {
  color: blue;
  font-size: 24px;
}

Penjelasan:

h1 —> selector (menargetkan semua elemen <h1>)
color: blue; —> memberi warna biru pada teks
font-size: 24px; —> mengatur ukuran teks menjadi 24 piksel

Jenis-Jenis Selector dalam CSS

1. Selector Tag

Menargetkan elemen HTML berdasarkan nama tag.

p {
  color: gray;
}

2. Class Selector

Menargetkan elemen berdasarkan atribut class.

.tebal {
  font-weight: bold;
}

HTML:

<p class="tebal">Ini paragraf tebal.</p>

3. ID Selector

Menargetkan elemen berdasarkan atribut id (harus unik).

#judul {
  text-align: center;
}

HTML:

<h1 id="judul">Selamat Datang</h1>

4. Universal Selector

Menargetkan semua elemen HTML.

* {
  margin: 0;
  padding: 0;
}

Beberapa Property Umum CSS

Property	Fungsi	Contoh Value
`color`	Warna teks	`red`, `#333`, `rgb(0,0,0)`
`font-size`	Ukuran teks	`16px`, `1.5em`
`font-weight`	Ketebalan teks	`normal`, `bold`
`text-align`	Perataan teks	`left`, `center`
`background`	Warna latar	`#f0f0f0`
`border`	Garis tepi	`1px solid black`
`margin`	Jarak luar elemen	`10px`, `auto`
`padding`	Jarak dalam elemen	`15px`

Contoh Code Lengkap

Berikut adalah contoh code lengkap html dan css selector:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #fdf6e3;
      font-family: Arial, sans-serif;
    }

    h1 {
      color: #2c3e50;
      text-align: center;
    }

    p {
      color: #555;
      font-size: 18px;
    }

    .highlight {
      background-color: yellow;
    }

    #footer {
      text-align: center;
      font-size: 14px;
      margin-top: 40px;
    }
  </style>
</head>
<body>

  <h1>Belajar CSS Itu Seru!</h1>
  <p>Ini adalah paragraf biasa.</p>
  <p class="highlight">Ini paragraf dengan latar kuning.</p>

  <div id="footer">Hak Cipta © 2025</div>

</body>
</html>

Hasilnya:

css-selector

Tips Belajar

Gunakan indentasi yang rapi agar mudah dibaca.
Akhiri setiap properti dengan titik koma (;).
Nama tag, class, dan ID bersifat case-insensitive (tidak membedakan huruf besar/kecil).
Gunakan ID untuk elemen unik, dan class untuk elemen yang bisa digunakan berkali-kali.

Kesimpulan

Sekarang kamu sudah paham:

Bagaimana menulis aturan CSS
Apa itu selector, property, dan value
Perbedaan antara selector tag, class, dan ID