Perbedaan yang menonjol antara id dan kelas dalam CSS adalah id digunakan untuk menerapkan gaya ke satu unsur unik sedangkan kelas digunakan untuk menerapkan gaya ke beberapa unsur.
Ada berbagai teknologi dalam pengembangan web. Bahasa utama untuk mengembangkan situs web adalah HTML, CSS, dan JavaScript. HTML adalah singkatan dari Hyper Text Markup Language. Ini membantu untuk mengembangkan struktur halaman web. JavaScript membantu membuat halaman web lebih dinamis. CSS adalah singkatan dari Cascading Style Sheets. Ini membantu untuk menambahkan gaya dan membuat halaman web lebih rapi. Aturan CSS berlaku untuk unsur HTML. Selain itu, pemilih CSS membantu menemukan unsur dan menerapkan gaya yang diperlukan ke tag HTML. id dan kelas adalah dua jenis penyeleksi.
Topik bahasan kami tentang:
- Apa itu Aturan CSS – Definisi, Contoh 2. Apa itu id – Definisi, Contoh 3. Apa itu kelas – Definisi, Contoh 4. Perbedaan Antara id dan kelas – Perbandingan Perbedaan Kunci
Istilah Utama
Kelas, Aturan CSS, ID
Yang perlu anda ketahui tentang Aturan CSS
CSS terdiri dari seperangkat aturan. Browser dapat menafsirkan aturan ini dan menerapkannya ke unsur yang ditentukan dalam dokumen. Aturan gaya CSS terdiri dari tiga bagian. Mereka adalah pemilih, properti, dan nilai. Deklarasi adalah istilah untuk kombinasi properti dan nilai. Mereka muncul di dalam sepasang kurung kurawal sebagai berikut.
pemilih { properti : nilai; }
Selector – Membantu mengidentifikasi unsur untuk menerapkan gaya
Properti – Sebuah atribut. Semua atribut HTML diubah menjadi properti CSS. Beberapa contohnya adalah warna, perataan teks, batas, dll.
Nilai – Nilai adalah apa yang diberikan ke properti. Sebagai contoh, biru dapat diberikan ke warna properti.
Yang perlu anda ketahui tentang id?
Pemrogram dapat menentukan aturan gaya berdasarkan id unsur. Semua unsur dengan id yang sama akan diterapkan dengan gaya yang ditentukan. Untuk memilih unsur dengan id tertentu, harus ada simbol # (hash) diikuti dengan id unsur.
Asumsikan bahwa file HTML berisi pernyataan sebagai berikut.
File CSS berisi potongan kode berikut.
#tajuk1{
warna biru;
}
Ketika browser menafsirkan pernyataan HTML, ia memeriksa id unsur h1, yaitu header1 dalam file CSS. Kemudian, itu menerapkan aturan CSS yang ditentukan ke unsur h1. Maka dari itu, teks Hello World akan muncul dengan warna biru.
Id unik di dalam halaman. Maka dari itu, pemilih id digunakan untuk satu unsur unik.
Yang perlu anda ketahui tentang kelas?
Mirip dengan id, programmer dapat menentukan aturan gaya berdasarkan kelas unsur. Semua unsur dengan kelas yang sama akan diterapkan dengan gaya yang ditentukan. Untuk memilih unsur dengan kelas tertentu, harus ada . simbol (titik) diikuti dengan nama kelas.
Asumsikan bahwa file HTML berisi pernyataan berikut.
File CSS berisi potongan kode berikut.
.header1{
warna biru;
}
Ketika browser menafsirkan pernyataan HTML, ia memeriksa kelas unsur h1, yaitu header1 dalam file CSS. Kemudian, itu menerapkan aturan CSS yang ditentukan ke semua unsur h1. Maka dari itu, teks Hello World 1 dan Hello World 2 akan muncul dengan warna biru.
Dimungkinkan untuk menggunakan kelas yang sama pada banyak unsur. Maka dari itu, pemilih kelas digunakan untuk beberapa unsur.
Perbedaan Antara id dan kelas di CSS
Definisi
id adalah pemilih dalam CSS yang menata unsur dengan id tertentu sedangkan kelas adalah pemilih dalam CSS yang menata unsur yang dipilih dengan kelas tertentu.
Sintaksis
Sintaks id adalah #id{ deklarasi css ; }. Sintaks kelasnya adalah .class { deklarasi css; }
Penggunaan
Selanjutnya, penggunaan id adalah untuk menerapkan gaya ke satu unsur tertentu. Penggunaan kelas adalah untuk menerapkan gaya ke beberapa unsur.
Kata terakhir
Id dan kelas adalah dua penyeleksi dalam CSS yang memungkinkan penerapan gaya ke unsur HTML. Perbedaan yang menonjol antara id dan kelas dalam CSS adalah id digunakan untuk menerapkan gaya ke satu unsur unik sementara kelas digunakan untuk menerapkan gaya ke beberapa unsur.
Sumber bacaan:
- “Sintaks dan Pemilih CSS.” Tutorial Web Online W3Schools , Tersedia di sini .
Sumber gambar:
- “CSS.3” Oleh Nikotaf – Karya sendiri (CC BY-SA 4.0) melalui Commons Wikimedia
