Hari 5: CSS Selector Dasar – Belajar CSS From Zero to Hero

by

Pelajari CSS selector dasar: tag, class, dan ID. Lengkap dengan contoh, studi kasus, serta latihan praktis agar website lebih rapi dan mudah diatur.

Hari 5: CSS Selector Dasar – Belajar CSS From Zero to Hero

Apa Itu CSS Selector?

Dalam CSS, selector digunakan untuk memilih elemen HTML yang ingin diberikan gaya (style). Selector adalah bagian paling penting dari CSS Syntax karena menentukan elemen mana yang akan terkena pengaturan.

Contoh sederhana:

p {
  color: green;
}

Artinya: semua elemen <p> pada halaman HTML akan memiliki warna teks hijau.

Jenis-Jenis CSS Selector Dasar

Ada tiga selector utama yang paling sering digunakan:

1. Tag Selector (Element Selector)

Selector ini memilih elemen berdasarkan nama tag HTML.
Contoh:

h1 {
  color: blue;
}

Artinya: semua tag <h1> akan berubah warna menjadi biru.

2. Class Selector

Selector ini menggunakan tanda titik (.) sebelum nama class. Class bisa dipakai berkali-kali di banyak elemen.
Contoh:

.judul {
  font-size: 24px;
  text-align: center;
}

HTML:

<h1 class="judul">Belajar CSS Selector</h1>
<p class="judul">Ini juga bisa diberi class yang sama</p>

Hasil: <h1> dan <p> yang memiliki class judul akan mendapatkan style tersebut.

3. ID Selector

Selector ini menggunakan tanda pagar (#) sebelum nama ID. ID hanya boleh digunakan satu kali pada sebuah halaman.
Contoh:

#header {
  background-color: #f2f2f2;
  padding: 20px;
}

HTML:

<div id="header">Ini adalah header</div>

Hasil: Elemen dengan ID header akan diberi background abu-abu terang.

Perbedaan Class dan ID Selector

  • Class bisa dipakai berulang di banyak elemen.
  • ID hanya boleh dipakai sekali untuk elemen unik.
  • Prioritas CSS: ID > Class > Tag.

Studi Kasus: Membuat Layout Artikel Blog

HTML:

<h1 class="judul">Judul Artikel</h1>
<p class="isi">Ini adalah paragraf pertama artikel.</p>
<p class="isi">Paragraf kedua dengan gaya yang sama.</p>
<div id="footer">Ini footer artikel</div>

CSS:

.judul {
  color: #0066cc;
  text-align: center;
}

.isi {
  font-size: 18px;
  line-height: 1.6;
}

#footer {
  background: #333;
  color: #fff;
  padding: 10px;
  text-align: center;
}

Hasil: Judul tampil biru di tengah, paragraf rapi dengan font 18px, dan footer bergaya kontras.

Kesalahan Umum Pemula

Menggunakan ID berulang kali
Salah:

<p id="teks">Teks 1</p>
<p id="teks">Teks 2</p>

Benar gunakan class:

<p class="teks">Teks 1</p>
<p class="teks">Teks 2</p>

2. Lupa tanda titik atau pagar
Salah:

judul {
  color: red;
}

Benar:

.judul {
  color: red;
}

Tips Menggunakan Selector dengan Efektif

  • Gunakan class untuk style berulang.
  • Gunakan ID hanya untuk elemen unik seperti #navbar, #footer.
  • Hindari memberi style langsung pada tag umum (misalnya p {}) jika ingin tampilan lebih fleksibel.
  • Konsisten dalam penamaan class & ID (gunakan huruf kecil, hindari spasi).

Latihan Praktis Hari 5

  1. Buat halaman HTML dengan:
    • Satu judul <h1>.
    • Tiga paragraf <p>.
    • Satu footer <div>.
  2. Beri judul class judul, paragraf class isi, dan footer ID footer.
  3. Buat file CSS untuk memberi warna, ukuran font, dan background berbeda.

Referensi Belajar

Rencana Belajar Selanjutnya

Hari ini kita sudah membahas CSS Selector Dasar (tag, class, dan ID). Besok, kita akan masuk ke Hari 6: CSS Selector Kombinasi untuk memahami cara menargetkan elemen lebih spesifik.
👉 Lanjut ke Hari 6: CSS Selector Kombinasi

Kesimpulan

  • CSS selector digunakan untuk memilih elemen HTML.
  • Tiga selector dasar: tag, class, dan ID.
  • Class = bisa dipakai berulang, ID = hanya sekali.
  • Penulisan selector harus tepat (.class, #id, tag).

🚀 Tantangan Hari 5:
Buat halaman artikel sederhana dengan judul, paragraf, dan footer. Gunakan selector tag, class, dan ID untuk mengatur tampilannya. Upload hasilnya di GitHub atau bagikan di media sosial dengan hashtag #BelajarCSS.

Leave a Comment