CARA SELEKTOR CLASS DI CSS

Pengertian Selektor Class di CSS

Selektor kelas di CSS merupakan teknik yang digunakan untuk memilih dan merubah gaya elemen HTML tertentu berdasarkan atribut kelasnya. Dalam penulisan, selektor kelas diawali dengan tanda titik (.) diikuti dengan nama kelas. Sebagai contoh: .kelas1 {color: red;}.

Penggunaan Selektor Class

Untuk menggunakan selektor class di CSS, kamu perlu mengikuti langkah-langkah berikut:

Membuat Elemen dengan Atribut Kelas

Pada kode HTML, buatlah sebuah elemen dan tambahkan atribut class dengan nilai sesuai keinginan kamu. Misalnya:

<p class='paragraf-merah'>Ini adalah paragraf dengan warna merah.</p>

Kamu juga dapat memberikan beberapa kelas pada satu elemen dengan cara memisahkan masing-masing kelas menggunakan spasi. Contohnya:

<p class='paragraf-merah teks-tebal'>Ini adalah paragraf dengan warna merah dan teks tebal.</p>

Menulis CSS untuk Kelas yang Telah Dibuat

Setelah membuat elemen dengan atribut kelas, selanjutnya adalah menulis kode CSS untuk kelas tersebut. Gunakan tanda titik sebelum nama kelas untuk menunjukkan kelas pada CSS. Berikut contohnya:

.paragraf-merah {
    color: red;
}

.teks-tebal {
    font-weight: bold;
}

Kode di atas akan membuat elemen dengan kelas paragraf-merah berwarna merah dan elemen dengan kelas teks-tebal menjadi tebal.

Selektif dalam Penggunaan Selektor Class

Salah satu keuntungan menggunakan selektor class adalah fleksibilitasnya. Kamu bisa menggunakan satu kelas untuk banyak elemen dan juga bisa menggunakan banyak kelas untuk satu elemen. Namun, perlu diingat untuk tidak membuat terlalu banyak kelas yang berfungsi sama, karena dapat membingungkan dan mempersulit proses pemeliharaan kode di masa depan.

Sebagai catatan, selalu gunakan nama kelas yang deskriptif yang mewakili fungsi atau kegunaan dari kelas tersebut. Ini akan membuat kode kamu lebih mudah dipahami oleh orang lain atau bahkan oleh diri kamu sendiri di waktu yang akan datang.

Demikian tutorial singkat mengenai cara selektor class di CSS. Praktekan apa yang sudah kamu pelajari untuk memperdalam pemahaman kamu. Selamat coding!