Ads by Yasya El Hakim
Tutorial Lengkap HTML: Class pada HTML - Bagian 19

Pada HTML, atribut class dapat kita gunakan untuk menentukan style yang sama dengan menggunakan nama class yang sama pula.

Jadi, semua elemen HTML yang memiliki nama atribut class yang sama maka akan mendapatkan tampilan yang sama.

Contoh
Berikut adalah contoh elemen <div> yang memiliki nama class yang sama:
<!DOCTYPE html>
<html>
<head>
<style>
.nama {
background-color: black;
color: white;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>

<div class="nama">
<h2>Yasya El Hakim</h2>
<p>EL Creative Author.</p>
</div>

<div class="nama">
<h2>Agung Cahyadi</h2>
<p>EL Creative Author.</p>
</div>

<div class="nama">
<h2>Misbaul Ulum</h2>
<p>EL Creative Author.</p>
</div>

</body>
</html> 
See the Pen 81. Class Nama by Yasya El Hakim (@elhakimyasya) on CodePen.

Menggunakan Atribut class pada Elemen Inline

Atribut class pada HTML juga dapat kita gunakan pada elemen Inline.

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
span.catatan {
font-size: 120%;
color: red;
}
</style>
</head>
<body>

<h1>Catatan <span class="catatan">Penting</span> Ku</h1>
<p>Ini adalah <span class="catatan">Catatan</span> pentingku.</p>

</body>
</html> 
See the Pen 82. Class Span by Yasya El Hakim (@elhakimyasya) on CodePen.

Tips:
  • Atribut class dapat kita gunakan pada semua elemen HTML.
  • Kalian dapat mempelajari lebih lanjut pada Tutorial Lengkap CSS.
Catatan: Nama class sangatlah sensitif. Jadi, kalian harus memperhatikan besar atau kecilnya huruf.

Memilih Elemen dengan class Tertentu

Pada CSS, untuk memilih class, kalian dapat menggunakan karakter titik (.) sebelum nama class.

Contoh

Tampilan CSS dengan nama class "nama".
<style>
.nama {
background-color: tomato;
color: white;
padding: 10px;
}
</style>

<h2 class="nama">Yasya El Hakim</h2>
<p>EL Creative Author.</p>

<h2 class="nama">Agung Cahyadi</h2>
<p>EL Creative Author.</p>

<h2 class="nama">Misbaul Ulum</h2>
<p>EL Creative Author.</p>

Hasilnya akan seperti berikut:

Yasya El Hakim

EL Creative Author.

Agung Cahyadi

EL Creative Author.

Misbaul Ulum

EL Creative Author.

Nama class Lebih dari Satu

Elemen pada HTML dapat memiliki lebih dari satu nama class, setiap nama class harus di beri jarak satu spasi.

Contoh

<h2 class="nama author">Yasya</h2>
<h2 class="nama">Agung</h2>
<h2 class="nama">Ulum</h2>

Pada contoh diatas, elemen <h2> pertama memiliki dua nama class yaitu "nama" dan "author".

Tag Berbeda dengan Nama Class yang Sama

Menggunakan nama class yang sama pada Tag yang berbeda seperti <h2> dan <p> bisa kita gunakan.

Contoh

<h2 class="nama">Yasya El Hakim</h2>
<p class="nama">EL Creative Author</p>

Menggunakan Atribut class pada JavaScript

Nama class juga bisa gunakan pada JavaScript untuk menyeleksi elemen yang dipilih.

JavaScript dapat mengakses elemen jika kalian menentukan nama class dengan menggunakan metode getElementsByClassName().

Contoh

Ketika kalian mengeklik tombol, maka elemen yang memiliki class "nama" akan disembunyikan:
<script>
function myFunction() {
var x = document.getElementsByClassName("nama");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script> 
See the Pen 83. Class JavaScript by Yasya El Hakim (@elhakimyasya) on CodePen.

Jangan khawatir jika kalian belum memahami contoh kode diatas.
Kalian dapat mempelajari JavaScript pada bagian selanjutnya.

Sebelumnya: Tutorial Lengkap HTML: Block pada HTML - Bagian 18
Selanjutnya: Tutorial Lengkap HTML: ID pada HTML - Bagian 20
Daftar isi: Tutorial Lengkap HTML

Sumber: https://www.w3schools.com/

0Komentar

Sebelumnya Selanjutnya