Kalau lo sering ngoding HTML, pasti pernah lihat atau denger soal class attribute. Nah, ini adalah fitur penting buat styling dan manipulasi elemen di website. Yuk, kita bahas lebih dalam!
1. The class Attribute
class attribute di HTML digunakan buat memberi nama ke elemen biar gampang di-styling pakai CSS atau dimanipulasi pakai JavaScript. Dengan class, lo bisa kasih gaya ke banyak elemen sekaligus tanpa harus nulis satu per satu.
2. The Syntax For Class
Penulisan class di HTML simpel banget. Lo tinggal tambahin class dalam tag HTML, lalu kasih nama class-nya.
Contoh:
<p class="highlight">Ini adalah paragraf dengan class "highlight".</p>Di CSS, lo bisa styling class tersebut begini:
.highlight {
color: red;
font-weight: bold;
}Hasilnya, teks dalam paragraf tersebut bakal jadi merah dan tebal.
Contoh dengan internal CSS:
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p class="highlight">Ini adalah paragraf dengan class "highlight".</p>
</body>
</html>Hasilnya:
3. Multiple Classes
Satu elemen bisa punya lebih dari satu class dengan cara memisahkannya pakai spasi.
Contoh:
<p class="highlight big-text">Paragraf ini punya dua class.</p>Di CSS:
.big-text {
font-size: 24px;
}Sekarang paragraf ini nggak cuma merah dan tebal, tapi juga teksnya lebih besar.
Contoh lebih lengkap dengan internal CSS:
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
color: red;
font-weight: bold;
}
.big-text {
font-size: 24px;
}
</style>
</head>
<body>
<p class="highlight big-text">Paragraf ini punya dua class.</p>
</body>
</html>Hasilnya:
4. Elements yang berbeda bisa berbagi class yang sama
Satu class bisa digunakan di banyak elemen sekaligus. Ini mempermudah styling tanpa harus nulis ulang.
Contoh:
<h1 class="title">Judul Besar</h1>
<p class="title">Ini paragraf dengan gaya yang sama.</p>Di CSS:
.title {
color: blue;
text-transform: uppercase;
}Baik <h1> maupun <p> bakal punya teks biru dan huruf besar semua.
Contoh dengan internal CSS:
<!DOCTYPE html>
<html>
<head>
<style>
.title {
color: blue;
text-transform: uppercase;
}
</style>
</head>
<body>
<h1 class="title">Judul Besar</h1>
<p class="title">Ini paragraf dengan gaya yang sama.</p>
</body>
</html>Hasilnya:
5. Menggunakan atribut class di javascript
Selain buat styling, class juga sering dipakai di JavaScript buat manipulasi elemen secara dinamis.
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<button onclick="ubahWarna()">Klik Aku</button>
<p id="text" class="normal">Ini paragraf.</p>
<script>
function ubahWarna() {
document.getElementById("text").classList.toggle("highlight");
}
</script>
</body>
</html>Hasilnya:
Setiap tombol diklik, class highlight bakal ditambah atau dihapus dari paragraf.
6. Chapter Summary
- class attribute digunakan buat ngasih nama ke elemen HTML.
- Bisa dipakai buat styling pakai CSS atau manipulasi pakai JavaScript.
- Satu elemen bisa punya multiple classes.
- Satu class bisa digunakan di banyak elemen.
- Bisa dimanfaatkan di JavaScript buat interaksi dinamis.
Sekarang lo udah ngerti tentang class di HTML! Cobain sendiri biar makin paham, ya!
Komentar