Class dan ID untuk Styling

Selector elemen yang kita pakai selama ini — p { }, h2 { } — mengenai semua elemen sejenis dalam satu halaman. Semakin besar halaman, cara itu kurang pas: Budi ingin satu tombol biru dan satu tombol polos, sementara keduanya elemen button. HTML menyediakan dua atribut global untuk itu: class untuk kelompok yang boleh berulang, dan id untuk penanda yang unik. Chapter ini membedah kapan masing-masing dipakai, konvensi penamaannya, dan cara menyusun class agar stylesheet mudah dirawat.

Class untuk Pola Berulang #

Atribut class memberi label pada elemen, dan selector titik (.nama) memilih semua elemen yang berlabel sama. Satu class boleh dipakai oleh sebanyak apa pun elemen, dan setiap perubahan aturan CSS langsung berlaku pada seluruh anggotanya. Pola inilah alasan class menjadi alat utama styling.

.tombol {
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 16px;
}

Class Ganda: Dasar Plus Variasi #

Satu elemen boleh memakai beberapa class sekaligus; nilainya dipisahkan spasi. Pola yang lazim adalah memecah tampilan menjadi aturan dasar dan aturan variasi: class tombol memuat bagian yang sama untuk semua tombol, sedangkan class tombol-utama dan tombol-garis menambahkan warna masing-masing.

<button class="tombol tombol-utama">Daftar Sekarang</button>
<button class="tombol tombol-garis">Lihat Demo</button>

Elemen pertama menerima gabungan kedua class: bentuk pill dan padding dari .tombol, ditambah latar biru dari .tombol-utama. Susunan class di atribut tidak menentukan siapa yang menang; yang menentukan adalah urutan aturan di file CSS.

Konvensi Penamaan kebab-case #

Nama class yang baik ditulis huruf kecil semua dan memisahkan kata dengan tanda hubung, contohnya kartu-profil dan tombol-utama. Gaya ini disebut kebab-case. Satu alasan teknis melarang spasi di dalam nama: nilai class memakai spasi sebagai pemisah antarclass, sehingga class="kartu profil" dibaca browser sebagai dua class, kartu dan profil.

ID untuk Target Unik #

Atribut id memberi identitas yang unik: satu nilai hanya boleh dipakai satu elemen per dokumen. Selector CSS-nya menempelkan tanda pagar di depan nama, contohnya #pendaftaran, tetapi penggunaan utamanya bukan styling:

• Target tautan internal: href="#pendaftaran" melompat ke elemen id="pendaftaran" (section Links dan Navigasi).
• Penghubung label dengan elemen form melalui atribut for (section Forms).
• Penanda yang dicari JavaScript ketika memanipulasi elemen (section berikutnya).

Ringkasannya seperti berikut:

Menghindari Styling via ID #

CSS memberi bobot berbeda pada setiap jenis selector saat dua aturan berebut elemen yang sama; bobot ini disebut specificity. Selector id (#pendaftaran) jauh lebih berbobot daripada selector class (.bagian), sehingga satu aturan ber-id sulit digantikan aturan class mana pun. Kebiasaan yang dianjurkan: sisakan id untuk anchor dan JavaScript, serahkan styling kepada class.

Contoh Lengkap: Tombol dengan Variasi Class #

Contoh berikut merangkai Chapter ini: dua tombol dengan dasar yang sama, satu tautan bergaya tombol selebar kontainer, dan satu section sebagai target tautan internal. Simpan kedua file dalam satu folder, lalu buka file HTML:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Styling dengan Class dan ID</title>
  <link rel="stylesheet" href="gaya-tombol.css">
</head>
<body>
  <p>
    <button class="tombol tombol-utama">Daftar Sekarang</button>
    <button class="tombol tombol-garis">Lihat Demo</button>
  </p>
  <p>
    <a class="tombol tombol-utama lebar-penuh" href="#pendaftaran">Lompat ke pendaftaran</a>
  </p>
  <section id="pendaftaran" class="bagian">
    <h2>Pendaftaran Kelas</h2>
    <p>Isi formulir pendaftaran untuk mengikuti kelas HTML dasar.</p>
  </section>
</body>
</html>

body {
  font-family: sans-serif;
}

.tombol {
  padding: 12px 24px;
  border: none;
  border-radius: 999px;
  font-size: 16px;
}

.tombol-utama {
  background-color: #2563eb;
  color: #ffffff;
}

.tombol-garis {
  background-color: #ffffff;
  color: #2563eb;
  border: 2px solid #2563eb;
}

.lebar-penuh {
  display: inline-block;
  width: 100%;
  text-align: center;
}

.bagian {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 3px solid #e2e8f0;
}

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Dua tombol pill berdampingan: "Daftar Sekarang" berlatar biru teks putih,
    "Lihat Demo" putih dengan garis biru
  - Satu tautan bergaya tombol biru selebar halaman, bertuliskan
    "Lompat ke pendaftaran"
  - Section "Pendaftaran Kelas" terpisah oleh garis abu-abu di atasnya
  - Klik tautan memindahkan layar ke section pendaftaran

Mari kita telaah peran class dan id di dalamnya:

1. class="tombol tombol-utama" dan class="tombol tombol-garis": kedua tombol membagi bentuk dari .tombol, lalu membedakan warna lewat class variasinya.
2. .tombol { border: none }: menghapus garis bawaan button agar variasi garis .tombol-garis terkendali.
3. .lebar-penuh dengan display: inline-block dan width: 100%: tautan a bersifat inline sehingga width diabaikan; mengubahnya menjadi inline-block membuat width: 100% berlaku.
4. href="#pendaftaran" dan id="pendaftaran": id menyediakan target lompatan tautan internal.
5. class="bagian" pada section yang sama: styling section dikerjakan class; id tidak muncul di CSS.
6. .bagian dengan border-top dan margin-top: memisahkan section secara visual dari bagian atas halaman.

Class kini menjadi alat pengelompokan utama setiap kali menulis CSS. Chapter penutup section ini menimbang kapan saat yang tepat melangkah ke CSS yang lebih dalam — dan ke mana rutenya.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Global attribute: class
• MDN Web Docs — Global attribute: id
• MDN Web Docs — Specificity

body {
  font-family: sans-serif;
}

.tombol {
  padding: 12px 24px;
  border: none;
  border-radius: 999px;
  font-size: 16px;
}

.tombol-utama {
  background-color: #2563eb;
  color: #ffffff;
}

.tombol-garis {
  background-color: #ffffff;
  color: #2563eb;
  border: 2px solid #2563eb;
}

.lebar-penuh {
  display: inline-block;
  width: 100%;
  text-align: center;
}

.bagian {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 3px solid #e2e8f0;
}

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Styling dengan Class dan ID</title>
  <link rel="stylesheet" href="gaya-tombol.css">
</head>
<body>
  <p>
    <button class="tombol tombol-utama">Daftar Sekarang</button>
    <button class="tombol tombol-garis">Lihat Demo</button>
  </p>
  <p>
    <a class="tombol tombol-utama lebar-penuh" href="#pendaftaran">Lompat ke pendaftaran</a>
  </p>
  <section id="pendaftaran" class="bagian">
    <h2>Pendaftaran Kelas</h2>
    <p>Isi formulir pendaftaran untuk mengikuti kelas HTML dasar.</p>
  </section>
</body>
</html>