Bayangkan Anda sedang membangun sebuah rumah. HTML adalah kerangkanya: dinding, atap, pintu, dan jendela. Sementara itu, CSS adalah cat, hiasan, dan furnitur yang membuat rumah itu indah dan unik. Namun, bagaimana jika Anda ingin mewarnai hanya satu pintu dengan warna merah, atau memasang lampu gantung hanya di ruang tamu? Di sinilah peran Class dan ID menjadi sangat penting. Keduanya adalah “penanda” khusus dalam HTML yang memungkinkan Anda menargetkan elemen tertentu untuk diberi gaya menggunakan CSS.

Mengenal Class

Class adalah atribut yang bisa Anda berikan ke satu atau lebih elemen HTML. Atribut ini berfungsi sebagai “label” atau “kategori”. Anda bisa menggunakan class untuk mengelompokkan elemen yang memiliki karakteristik yang sama, seperti semua tombol, semua paragraf penting, atau semua kartu produk.

Cara Menggunakan Class

Untuk menerapkan class, Anda cukup menambahkan atribut class pada tag HTML.

<h2 class="judul-artikel">Ini adalah Judul Artikel</h2>
<p class="paragraf-penting">Ini adalah paragraf yang sangat penting.</p>
<p class="paragraf-biasa">Ini adalah paragraf biasa.</p>
<button class="tombol-biru">Klik Saya</button>
<button class="tombol-biru">Klik Saya Juga</button>

Cara Menargetkan Class dengan CSS

Di dalam file CSS, Anda menargetkan class dengan menggunakan tanda titik (.) diikuti dengan nama class.

/* Menargetkan semua elemen dengan class "tombol-biru" */
.tombol-biru {
  background-color: blue;
  color: white;
  border-radius: 5px;
}

/* Menargetkan semua elemen dengan class "paragraf-penting" */
.paragraf-penting {
  font-weight: bold;
  color: red;
}

Poin Penting: Satu elemen bisa memiliki lebih dari satu class, cukup pisahkan dengan spasi.

<p class="paragraf-penting teks-tebal">Ini adalah paragraf yang penting dan tebal.</p>

Mengenal ID

ID adalah atribut unik yang hanya boleh digunakan satu kali dalam satu halaman HTML. ID berfungsi seperti “nomor identitas” atau “nomor induk siswa” yang tidak boleh sama dengan yang lain. ID digunakan untuk menargetkan elemen yang benar-benar tunggal, seperti header utama, footer, atau area konten utama.

Cara Menggunakan ID

Untuk menerapkan id, Anda menambahkan atribut id pada tag HTML.

<header id="header-utama">
  <h1>Situs Web Saya</h1>
</header>
<main id="konten-utama">
  <p>Isi dari halaman web.</p>
</main>
<footer id="footer-situs">
  <p>&copy; 2025 Situs Saya</p>
</footer>

Cara Menargetkan ID dengan CSS

Di dalam file CSS, Anda menargetkan id dengan menggunakan tanda pagar (#) diikuti dengan nama id.

/* Menargetkan elemen dengan id "header-utama" */
#header-utama {
  background-color: #333;
  color: white;
  padding: 20px;
}

/* Menargetkan elemen dengan id "konten-utama" */
#konten-utama {
  width: 80%;
  margin: auto;
  padding: 15px;
}

Poin Penting: ID memiliki prioritas lebih tinggi daripada Class dalam hal spesifisitas CSS.

Class vs. ID: Kapan Menggunakannya?

Sebagai aturan praktis, selalu mulai dengan Class. Gunakan ID hanya jika Anda yakin elemen tersebut benar-benar unik di seluruh halaman. Dengan memahami perbedaan ini, Anda dapat membuat kode HTML yang lebih terstruktur dan kode CSS yang lebih terorganisir dan mudah dikelola.

Semoga artikel ini membantu Anda memahami perbedaan antara Class dan ID!