Belajar CSS dari Nol: Panduan Dasar #4 - Menggunakan Kelas dan ID Selector

 

Ketika Anda bekerja dengan CSS, Anda akan sering menemukan situasi di mana Anda ingin menerapkan gaya tertentu hanya pada elemen tertentu dalam halaman web Anda. Dalam hal ini, Anda dapat menggunakan kelas dan ID selector.

Kelas selector digunakan untuk mengidentifikasi elemen HTML dengan kelas yang sama. Anda dapat menambahkan kelas pada elemen HTML dengan menggunakan atribut class. Kemudian, Anda dapat menentukan gaya CSS untuk elemen dengan kelas tertentu dengan menggunakan selektor .nama-kelas. Contoh:

 

<p class="teks-biru">Ini adalah teks dengan kelas teks-biru</p>

.teks-biru {
    color: blue;
}
 

ID selector digunakan untuk mengidentifikasi elemen HTML dengan ID unik. Anda dapat menambahkan ID pada elemen HTML dengan menggunakan atribut id. Kemudian, Anda dapat menentukan gaya CSS untuk elemen dengan ID tertentu dengan menggunakan selektor #nama-id. Contoh:

 

<p id="teks-merah">Ini adalah teks dengan ID teks-merah</p>

#teks-merah {
    color: red;
}
 

 

Perhatikan bahwa ID selector memiliki prioritas lebih tinggi dibandingkan kelas selector. Ini berarti jika Anda menerapkan gaya pada elemen dengan ID yang sama dan kelas yang sama, gaya dari ID selector akan diambil.

Itulah beberapa hal dasar tentang kelas dan ID selector dalam CSS. Anda dapat mempelajari lebih lanjut tentang cara menggunakan kelas dan ID selector untuk mengatasi masalah gaya pada halaman web Anda.

Posting Komentar

0 Komentar