Selektor Element

Selektor element adalah salah satu cara untuk mengganti gaya (styling) elemen HTML di halaman web Anda. Dengan menggunakan selektor element, Anda dapat mengatur properti CSS untuk semua elemen dengan tag yang sama. Berikut adalah cara menggunakan selektor element:

Menggunakan Tag HTML

Anda dapat menggunakan tag HTML sebagai selektor element. Misalnya, jika Anda ingin mengganti gaya untuk semua elemen <p> di halaman Anda, Anda dapat menggunakan selektor element ini:

p {
   /* Properti CSS di sini */
}

Kemudian, Anda dapat menambahkan properti CSS yang ingin Anda terapkan di dalam blok tersebut.

Menggunakan Kelas CSS

Anda juga dapat menggunakan kelas CSS sebagai selektor element. Ini memungkinkan Anda mengganti gaya elemen dengan kelas tertentu. Contohnya:

.kelas-saya {
   /* Properti CSS di sini */
}

Kemudian, pada elemen HTML yang ingin Anda gayakan, tambahkan atribut class dengan nilai kelas-saya.

Menggunakan ID HTML (tidak disarankan)

Meskipun dapat digunakan, penggunaan ID sebagai selektor element tidak disarankan karena ID harus unik di halaman web. Tapi jika Anda ingin menggunakannya, berikut contohnya:

#id-saya {
   /* Properti CSS di sini */
}

Pastikan hanya ada satu elemen dengan ID yang sesuai di halaman Anda.

Contoh Penggunaan

Berikut adalah contoh penggunaan selektor element dalam CSS:

<!DOCTYPE html>
<html>
<head>
    <style>
        /* Selektor Element berdasarkan Tag */
        p {
            color: blue;
        }

        /* Selektor Element berdasarkan Kelas */
        .merah {
            color: red;
        }
    </style>
</head>
<body>
    <p>Ini adalah sebuah paragraf dengan teks berwarna biru.</p>
    <p class="merah">Ini adalah paragraf lain dengan teks berwarna merah.</p>
</body>
</html>

Dalam contoh di atas, semua elemen <p> akan memiliki teks berwarna biru, sedangkan elemen dengan kelas merah akan memiliki teks berwarna merah.

Semoga tutorial ini membantu Anda memahami cara menggunakan selektor element dalam CSS! Jika Anda memiliki pertanyaan lebih lanjut, jangan ragu untuk bertanya.

PREVIOUS
NEXT