Belajar HTML - Mengelompokkan Elemen dengan Class

Halo teman-teman,

Setelah sebelumnya kita belajar tentang perbedaan elemen block dan inline di HTML, sekarang kita masuk ke fitur yang sering banget dipakai untuk styling dan pengelompokan elemen: class.

Atribut class memungkinkan kita memberi nama pada satu atau lebih elemen HTML supaya bisa dikendalikan atau diberi gaya bersama-sama lewat CSS. Yuk kita pelajari cara penggunaannya.

Dasar Atribut class

Atribut class ditulis di dalam tag HTML dan diberi nama tertentu. Contoh:

<p class="highlight">Ini paragraf dengan class 'highlight'</p>

Di sini, elemen <p> memiliki class bernama highlight. Nama class ini bisa kamu tentukan sendiri, tapi usahakan deskriptif dan jelas.

Menggunakan CSS untuk Mengatur Class

Class jadi berguna kalau kamu ingin menerapkan gaya CSS. Kamu bisa menulis aturan CSS seperti ini:

<style>
  .highlight {
    background-color: yellow;
    font-weight: bold;
  }
</style>

• Tanda titik (.) di depan nama class adalah selector CSS untuk class

• Semua elemen dengan class highlight akan diberi latar kuning dan teks tebal

Elemen Berbagi Class yang Sama

Beberapa elemen bisa menggunakan class yang sama. Misalnya:

<h2 class="judul">Judul Pertama</h2>
<p class="judul">Ini juga bagian dari class 'judul'</p>

Dengan begitu, kamu cukup menulis satu aturan CSS saja untuk banyak elemen sekaligus.

Satu Elemen, Banyak Class

Kamu juga bisa menambahkan lebih dari satu class dalam satu elemen. Cukup pisahkan dengan spasi:

<h2 class="judul besar">Teks Judul</h2>

Di sini, elemen tersebut termasuk dalam class judul dan besar. CSS akan menerapkan aturan dari keduanya jika tersedia.

Class vs ID (sedikit bocoran)

Class biasanya digunakan untuk banyak elemen, sedangkan ID hanya untuk satu elemen unik. Tapi kita akan bahas ID lebih detail di materi selanjutnya.

Sekarang kamu sudah tahu bagaimana menggunakan atribut class untuk mengelompokkan elemen dan memberikan gaya secara konsisten. Ini penting banget kalau kamu ingin halaman HTML kamu tampil lebih rapi, terstruktur, dan gampang dikontrol lewat CSS.

Kalau ada pertanyaan atau kamu ingin berbagi contoh penggunaan class yang kamu temukan, silakan tulis di kolom komentar. Yuk diskusi bareng!

Di materi selanjutnya, kita akan belajar tentang ID di HTML—apa bedanya dengan class dan kapan sebaiknya digunakan. Sampai ketemu di tutorial berikutnya!

Baca juga