class HTML
Atribut class digunakan oleh CSS dan JavaScript untuk menyeleksi, memilih, dan mengakses elemen HTML.
Misalnya, kita memiliki elemen HTML dengan gaya CSS yang sama, kita tentu saja bisa menyisipkan gaya CSS tersebut ke setiap elemen HTML menggunakan atribut style.
Seperti ini:
<!DOCTYPE html>
<html lang="id">
<head>
<title>Belajar HTML</title>
</head>
<body>
<p style="color: blue; font-size: 20px">Ini adalah paragraf pertama</p>
<p style="color: blue; font-size: 20px">Ini adalah paragraf kedua</p>
</body>
</html>
Tidak ada yang salah dengan kode di atas, halaman kita berfungsi dengan baik. Tapi kode di atas sulit dikelola.
Jika kita ingin menambahkan gaya CSS yang baru, kita perlu menyisipkan gaya tersebut ke dalam atribut style masing-masing elemen.
Bayangkan kalau ada ratusan elemen? Ini tentu saja merepotkan.
Berikut jika kita menggunakan class:
<!DOCTYPE html>
<html lang="id">
<head>
<title>Belajar HTML</title>
<style>
.paragraph {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<p class="paragraph">Ini adalah paragraf pertama</p>
<p class="paragraph">Ini adalah paragraf kedua</p>
</body>
</html>
Ketika kita ingin mengubah gaya paragraf, kita hanya perlu mengubah CSS yang menyeleksi kelas yang digunakan elemen tersebut dalam hal ini .paragraph.
Ketika CSS .paragraph diubah, semua elemen yang menggunkaan kelas paragraph otomatis berubah.
Jadi, apa itu class?
Apakah kita boleh membuat lebih dari satu nama class dalam satu elemen?
Mari kita pelajari lebih lanjut.
Apa Itu class?
class adalah atribut global yang digunakan untuk menentukan kelas elemen HTML.
Anggap saja class seperti identitas, tapi tidak harus unik, artinya setiap elemen dapat memiliki nama kelas yang sama.
Kelas memungkinkan CSS dan JavaScript untuk memilih, menyeleksi, dan mengakses elemen tertentu.
Menggunakan Atribut class
Karena class atribut global, kita bisa menambahkan atribut tersebut ke semua tag HTML.
Cukup tulis atribut tersebut di dalam tag pembuka HTML dengan nilai nama kelas, contoh class="paragraf".
Jika nama kelas mengandung dua kata, ubah spasi dengan tanda hubung, jangan gunakan spasi karena ini akan dianggap sebagai nama kelas yang berbeda, contoh class="nama-kelas".
Nama kelas peka huruf besar/kecil, ketika kita menyeleksi kelas tertentu menggunakan CSS atau JavaScript, nama kelas harus ditulis sama persis.
Selain itu, elemen HTML yang berbeda dapat memiliki nama kelas yang sama.
Contoh:
<!DOCTYPE html>
<html lang="id">
<head>
<title>Belajar HTML</title>
<style>
.wrapper {
padding: 10px;
margin: 20px 0;
background-color: bisque;
}
</style>
</head>
<body>
<div class="wrapper">
<h1>Sebuah Judul</h1>
<p>deskripsi</p>
</div>
<div class="wrapper">
<h1>Sebuah Judul</h1>
<p>deskripsi</p>
</div>
</body>
</html>
Hasil:
Notasi titik (.) sebelum nama kelas pada kode CSS tidak dianggap sebagai nama kelas, tapi ini memberi tahu CSS bahwa teks setelah notasi titik adalah nama kelas.
Kalau id menggunakan tanda pagar (#), sedangkan class menggunakan titik (.).
Menggunakan Beberapa class
Dalam satu elemen HTML, kita bisa menyisipkan lebih dari satu nama kelas.
Cukup tulis nama kelas yang berbeda di dalam atribut class yang sama dipisahkan dengan spasi, contoh class="nama1 nama2".
Sekarang kita paham, mengapa nama kelas tidak boleh mengandung spasi, alasannya karena dianggap sebagai nama kelas yang berbeda.
Contoh:
<!DOCTYPE html>
<html lang="id">
<head>
<title>Belajar HTML</title>
<style>
.wrapper {
padding: 10px;
margin: 20px 0;
background-color: bisque;
}
.primary {
border: 5px dashed blueviolet;
}
</style>
</head>
<body>
<div class="wrapper primary">
<h1>Sebuah Judul</h1>
<p>deskripsi</p>
</div>
<div class="wrapper">
<h1>Sebuah Judul</h1>
<p>deskripsi</p>
</div>
</body>
</html>
Hasil:
