Apa Itu Class Dalam Html

3 min read Jun 28, 2024
Apa Itu Class Dalam Html

Apa Itu Class dalam HTML?

Dalam HTML, class adalah atribut yang digunakan untuk mengelompokkan elemen-elemen HTML yang memiliki kesamaan dalam tampilan atau perilaku. Class memungkinkan Anda untuk menerapkan gaya yang sama atau perilaku JavaScript yang sama ke beberapa elemen HTML sekaligus.

Cara Menggunakan Class

Anda dapat menambahkan class ke elemen HTML dengan menggunakan atribut class di dalam tag pembuka elemen. Misalnya:

Ini adalah paragraf penting.

Dalam contoh di atas, paragraf diberikan class bernama "important".

Keuntungan Menggunakan Class

Berikut adalah beberapa keuntungan utama menggunakan class dalam HTML:

  • Pengelompokan Elemen: Class memungkinkan Anda untuk mengelompokkan elemen yang memiliki kesamaan. Ini sangat berguna untuk menerapkan gaya atau skrip yang sama ke beberapa elemen.
  • Pengaturan Gaya: Class memungkinkan Anda untuk mengatur gaya elemen menggunakan CSS. Anda dapat menggunakan selector class dalam CSS untuk menentukan tampilan elemen yang memiliki class tertentu.
  • Pengaturan Perilaku: Class juga memungkinkan Anda untuk mengatur perilaku elemen menggunakan JavaScript. Anda dapat memilih elemen dengan class tertentu dan menerapkan perilaku khusus ke elemen tersebut.
  • Reusable: Class dapat digunakan kembali di berbagai bagian HTML dan pada berbagai halaman web. Ini memungkinkan Anda untuk mengatur desain dan perilaku website dengan lebih efisien.

Contoh Penggunaan Class

Misalnya, Anda ingin membuat dua tombol dengan warna yang berbeda. Anda dapat menggunakan class untuk mencapai hal ini:



Kemudian, dalam file CSS Anda, Anda dapat menentukan gaya untuk class "primary" dan "secondary":

.btn {
  /* Gaya dasar tombol */
}

.btn.primary {
  /* Gaya untuk tombol utama */
  background-color: blue;
  color: white;
}

.btn.secondary {
  /* Gaya untuk tombol sekunder */
  background-color: green;
  color: white;
}

Dengan menggunakan class, Anda dapat dengan mudah mengelola gaya dan perilaku berbagai elemen HTML.

Related Post


Latest Posts