Mengenal CSS: ID, Class dan Tag
Dalam CSS, kita menggunakan selector untuk menargetkan elemen HTML yang ingin diberi gaya. Tiga jenis selector paling umum adalah tag selector, class selector, dan ID selector.
🔍 Apa Bedanya Tag, Class, dan ID?
- Tag selector: Menargetkan elemen HTML langsung seperti
p,h1, ataudiv - Class selector: Menargetkan elemen dengan atribut
class(dengan awalan titik.) - ID selector: Menargetkan elemen dengan atribut
id(dengan awalan pagar#)
📦 Contoh CSS & HTML
Kode di bawah ini menunjukkan penggunaan ketiga jenis selector:
<style>
p {
color: green;
}
.highlight {
background-color: yellow;
padding: 5px;
}
#judul {
font-size: 24px;
color: navy;
}
</style>
Contoh HTML:
<h1 id="judul">Ini Judul Utama</h1>
<p>Paragraf pertama ini menggunakan selector tag.</p>
<p class="highlight">Paragraf kedua menggunakan class.</p>
🔄 Coba Jalankan:
🎯 Kesimpulan
- Tag digunakan untuk semua elemen tertentu (misal semua <p>)
- Class bisa digunakan berkali-kali di banyak elemen
- ID hanya digunakan satu kali untuk elemen unik
🧪 Latihan Interaktif
Edit kode di bawah ini agar paragraf tampil dengan warna dan latar belakang berbeda, lalu jalankan:
📝 Tugas Praktik Mandiri
- Buat file HTML dengan judul dan dua paragraf
- Beri ID pada judul dan class berbeda untuk tiap paragraf
- Gunakan CSS untuk memberi warna dan gaya berbeda ke tiap elemen
- Jalankan di browser, dan lihat perbedaannya
Bonus: Tambahkan elemen <div> dan coba kombinasikan dengan class dan ID!