Selektor Kelas Class Selector

Selektor kelas memungkinkan Anda untuk menerapkan gaya ke elemen HTML yang memiliki atribut class tertentu. Ini berguna ketika Anda ingin menggaya beberapa elemen dengan gaya yang sama.

Langkah-langkahnya:

Tambahkan Kelas ke Elemen HTML

Dalam elemen HTML yang ingin Anda gaya, tambahkan atribut class dengan nama yang Anda inginkan, seperti ini:

<p class="teks-merah">Ini adalah teks dengan gaya kelas.</p>

Definisikan Gaya CSS

Di dalam tag <style> di bagian <head> dokumen HTML Anda, definisikan gaya untuk kelas tersebut:

<style>
 .teks-merah {
   color: red;
   font-weight: bold;
 }
</style>

Di sini, kita mendefinisikan kelas .teks-merah dengan warna teks merah dan tebal.

Terapkan Gaya ke Elemen

Kini, elemen dengan atribut class yang sesuai akan menerapkan gaya yang telah Anda definisikan:

<p class="teks-merah">Ini adalah teks dengan gaya kelas.</p>

Teks dalam elemen tersebut akan berwarna merah dan tebal sesuai dengan definisi kelas.

Anda dapat menggunakan selektor kelas untuk menggaya berbagai elemen dalam dokumen Anda dengan cara yang konsisten. Pastikan untuk memberi nama kelas yang deskriptif dan relevan dengan gaya yang Anda inginkan untuk mempermudah pemeliharaan dan pengembangan.

PREVIOUS
NEXT