1. Mengenal 3 Pilar Selector Utama

Dalam pengembangan portal berita seperti SatuMedia, kamu akan sering berurusan dengan tiga jenis selector ini. Masing-masing memiliki tingkat spesifikasitas yang berbeda.

A. Tag Selector (Selector Elemen)

Digunakan untuk memberikan gaya ke semua elemen dengan tag yang sama.

• Analogi: Memberikan seragam kepada semua siswa di sekolah.

• Contoh: p { color: grey; } akan membuat semua paragraf di website menjadi abu-abu.

B. Class Selector (.)

Digunakan untuk memberikan gaya ke sekelompok elemen tertentu, tanpa mempedulikan jenis tag-nya.

• Analogi: Memberikan pita merah hanya kepada siswa yang ikut ekskul musik.

• Contoh: .text-merah { color: red; } bisa ditempelkan ke

  ,

  , atau .

C. ID Selector (#)

Digunakan untuk memberikan gaya ke satu elemen unik saja dalam satu halaman.

• Analogi: Memberikan lencana khusus kepada satu orang Kepala Sekolah.

• Contoh: #header-utama { background: black; }.

2. Perbandingan Spesifikasitas (Hierarki Kekuatan)

Jika satu elemen dipengaruhi oleh ketiga selector tersebut dengan warna yang berbeda, manakah yang menang? CSS memiliki aturan "Hierarchy of Specificity":

3. Tutorial: Implementasi pada Struktur SatuMedia

Mari kita terapkan pada komponen nyata. Bayangkan kamu ingin mengatur gaya pada berita utama dan sidebar.

Kode HTML:

<main id="main-content"> <article class="card-berita"> <h2 class="judul-berita">Laravel di M4 Chiph2> article> <article class="card-berita"> <h2 class="judul-berita">Update Kolak Pisang Apph2> article> main>

Kode CSS:

/* 1. Global: Semua artikel punya font sans-serif */
article { font-family: sans-serif;
} /* 2. Class: Semua kartu berita punya border dan bayangan */
.card-berita { border: 1px solid #ddd; padding: 15px; margin-bottom: 10px; border-radius: 8px;
} /* 3. Class: Mengatur warna judul berita */
.judul-berita { color: #2980b9;
} /* 4. ID: Memberikan background khusus hanya untuk area main content */
#main-content { background-color: #f4f4f4; padding: 20px;
}