Pengantar Kelas dan ID
Cascading Style Sheets (CSS) merupakan bahasa yang menjelaskan tampilan dan pemformatan dokumen yang ditulis menggunakan bahasa markup.
CSS banyak digunakan untuk menata halaman web yang ditulis dalam HTML.
CSS memungkinkan menentukan pemilih gaya Anda sendiri selain menerapkan gaya untuk elemen HTML.
Ini dilakukan dengan menggunakan ID dan pemilih kelas.
Saat menentukan gaya untuk satu elemen unik, pemilih ID digunakan.
Saat menentukan gaya untuk sekelompok elemen, pemilih kelas digunakan.
Apa itu Kelas?
Di CSS, pemilih Kelas dapat digunakan untuk menerapkan gaya Anda sendiri ke sekelompok elemen.
Pemilih Kelas digunakan untuk menerapkan gaya tertentu ke sekumpulan elemen dengan kelas yang sama.
Di CSS, pemilih kelas diidentifikasi dengan tanda titik (.).
Berikut adalah contoh pemilih kelas yang didefinisikan dalam CSS.
.kelasku {
warna biru;
font-berat: tebal;
}
HTML dapat merujuk ke kelas yang didefinisikan dalam CSS dengan menggunakan kelas atribut seperti yang ditunjukkan di bawah ini.
<p class=”my_class”>Ini adalah pemformatan saya</p>
<p class=”my_class”>Ini adalah pemformatan saya lagi</p>
Seperti yang ditunjukkan di atas, kelas yang sama dapat digunakan untuk banyak elemen dan satu elemen dapat menggunakan banyak kelas.
Ketika beberapa kelas digunakan dalam elemen yang sama, kelas dimasukkan ke dalam atribut kelas yang dibatasi oleh spasi seperti yang ditunjukkan di bawah ini.
<p class=”my_class_1 my_class_2″>Ini adalah pemformatan saya menggunakan dua kelas</p>
Apa itu tanda pengenal?
Di CSS, pemilih ID dapat digunakan untuk menerapkan gaya Anda sendiri ke satu elemen unik.
Di CSS, pemilih ID diidentifikasi dengan hash (#).
Berikut adalah contoh pemilih ID yang ditentukan dalam CSS.
#my_ID {
warna merah;
perataan teks: kanan;
}
HTML dapat merujuk ke pemilih ID yang ditentukan dalam CSS dengan menggunakan id atribut seperti yang ditunjukkan di bawah ini.
<p id=”my_ID”>Ini adalah pemformatan saya dari pemilih ID</p>
ID itu unik.
Oleh karena itu setiap elemen hanya dapat memiliki satu ID dan setiap halaman hanya dapat memiliki satu elemen dengan ID spesifik tersebut.
ID memiliki karakteristik penting yang dapat digunakan dengan browser.
Jika URL halaman berisi nilai hash (mis.
http://myweb.com#my_id), browser akan mencoba menemukan secara otomatis elemen dengan ID “my_id” dan menggulir halaman web untuk menampilkan elemen tersebut.
Inilah salah satu alasan mengapa laman harus memiliki satu elemen dengan ID spesifik tersebut, sehingga browser dapat menemukan elemen tersebut.
Apa perbedaan antara Kelas dan ID?
Meskipun pemilih Kelas dan pemilih ID dapat digunakan untuk menerapkan gaya Anda sendiri ke elemen dalam halaman web, keduanya memiliki beberapa perbedaan penting.
Pemilih kelas dapat digunakan untuk menerapkan gaya Anda sendiri ke sekelompok elemen, sedangkan pemilih ID digunakan untuk menerapkan gaya ke satu elemen unik.
Saat menggunakan ID, setiap elemen hanya dapat memiliki satu ID dan setiap halaman hanya dapat memiliki satu elemen dengan ID spesifik tersebut, tetapi Kelas dapat digunakan untuk beberapa elemen dan satu elemen dapat menggunakan beberapa Kelas.
Selain itu, ID dapat digunakan untuk menggulir halaman secara otomatis untuk menampilkan elemen dengan ID tersebut, tetapi hal ini tidak dapat dilakukan dengan pemilih kelas.