HTML Class

Atribut class di HTML

Atribut class digunakan untuk memberi identitas pada elemen HTML dan memungkinkan kita untuk mengelompokkan elemen yang memiliki gaya atau fungsi yang sama.

Menambahkan Atribut class ke Elemen

Dengan menambahkan atribut class pada elemen HTML, kita dapat mengaitkan elemen tersebut dengan gaya atau skrip tertentu.

<div class="kotak">
  <p>Ini adalah elemen dengan kelas "kotak".</p>
</div>

Menggunakan CSS dengan Atribut class

Dengan atribut class, kita dapat menerapkan gaya CSS untuk elemen-elemen tertentu.

<style>
  .kotak {
    background-color: lightblue;
    padding: 20px;
    border: 1px solid blue;
  }
</style>
 
<div class="kotak">
  <p>Elemen dengan class "kotak" yang memiliki gaya CSS.</p>
</div>

Menambahkan Beberapa Kelas pada Satu Elemen

Satu elemen dapat memiliki lebih dari satu kelas dengan memisahkan kelas-kelas tersebut menggunakan spasi.

<style>
  .kotak {
    background-color: lightblue;
    padding: 20px;
  }
  .tebal {
    font-weight: bold;
  }
</style>
 
<div class="kotak tebal">
  <p>Elemen dengan dua kelas: "kotak" dan "tebal".</p>
</div>

Menggunakan Kelas dalam JavaScript

Atribut class juga sering digunakan dalam JavaScript untuk mengakses dan mengubah elemen-elemen HTML.

<button class="my-button" onclick="ubahWarna()">Klik Saya</button>
 
<script>
  function ubahWarna() {
    document.querySelector('.my-button').style.backgroundColor = 'red';
  }
</script>

Tips

• Gunakan kelas untuk mengelompokkan elemen-elemen dengan gaya atau fungsi yang serupa.
• Nama kelas tidak boleh mengandung spasi.
• Gunakan kelas untuk mengakses elemen dengan JavaScript.