Dalam HTML, class adalah atribut yang digunakan untuk mengelompokkan elemen berdasarkan jenis atau fungsi mereka. Dengan menggunakan class, Anda dapat memberi gaya atau akses ke sekelompok elemen tertentu secara bersamaan tanpa harus merubah setiap elemen secara individual. Pada artikel ini kita akan Belajar HTML membahas secara lebih rinci tentang class HTML dan bagaimana menggunakannya.
Menggunakan Class pada Elemen HTML
Untuk menggunakan class pada elemen HTML, Anda perlu menambahkan atribut class dengan nilai tertentu pada tag elemen yang ingin Anda kelompokkan. Nilai dari atribut class dapat berupa satu kata atau lebih, dipisahkan dengan spasi. Berikut adalah contoh tag elemen dengan atribut class
<p class="teks-utama">Ini adalah teks utama.</p>
Pada contoh di atas, atribut class diberi nilai "teks-utama". Anda dapat memberi nilai atribut class dengan bebas, asalkan nilainya tidak mengandung spasi dan dimulai dengan huruf atau underscore.
Menggunakan CSS untuk Mengatur Elemen Berdasarkan Class
Setelah Anda menambahkan class pada elemen HTML, Anda dapat menggunakan CSS untuk memberi gaya atau mengatur elemen yang mempunyai class tertentu secara bersamaan. Untuk menargetkan elemen berdasarkan class, gunakan titik (.) sebelum nama class yang ingin Anda atur. Berikut adalah contoh kode CSS yang digunakan untuk mengatur elemen yang mempunyai class "teks-utama":
.teks-utama { color: blue; font-size: 20px; }
Pada contoh di atas, kode CSS memberi gaya pada elemen yang mempunyai class "teks-utama" dengan mengatur warna teks menjadi biru dan ukuran font menjadi 20 piksel.
Anda juga dapat menargetkan beberapa class sekaligus dengan memisahkan nama class dengan titik. Berikut adalah contoh kode CSS yang mengatur elemen yang mempunyai class "teks-utama" dan "bold":
.teks-utama.bold { font-weight: bold; }
Pada contoh di atas, kode CSS memberi gaya pada elemen yang mempunyai class "teks-utama" dan "bold" dengan mengatur teks menjadi tebal.Kombinasi Class pada Elemen HTML
Anda dapat menggabungkan beberapa class pada elemen HTML dengan menambahkan nilai class dengan spasi. Dalam kasus ini, elemen tersebut akan menjadi bagian dari setiap class yang ditambahkan. Berikut adalah contoh tag elemen dengan dua class yang digabungkan:
<p class="teks-utama bold">Ini adalah teks utama dan tebal.</p>
Pada contoh di atas, elemen mempunyai dua class, yaitu "teks-utama" dan "bold". Dalam kode CSS, Anda dapat menargetkan elemen tersebut dengan cara yang sama seperti pada class tunggal.
Kesimpulannya, class pada HTML adalah atribut yang digunakan untuk mengelompokkan elemen berdasarkan jenis atau fungsi mereka. Dengan menggunakan class, Anda dapat memberi gaya atau mengatur sekelompok elemen tertentu secara bersamaan dengan menggunakan CSS.