Terdapat dua buah selector yang terkenal dalam CSS yaitu ID dan Class. Penulis pernah bingung membedakan keduanya dan akankah menggunakan selector ID ataukah menggunakan selector Class untuk sebuah tag HTML. Untuk itu saya ingin sedikit berbagi mengenai perbedaan keduanya dan pengaplikasiannya pada kode HTML dan CSS.
ID
ID sepantasnya digunakan hanya sekali pada setiap elemen halaman web. Yang dimaksud dengan elemen yaitu header, main navigation, left side, footer, dll. Jadi, ID digunakan untuk memberi nama untuk sebuah elemen atau bagian sebuah halaman web yang bersifat unik. Mengapa dikatakan unik, karena dalam setiap document CSS hanya boleh ada satu nama elemen. Pada document CSS harus diawali karakter “#”. Berikut ini contoh selector ID.
<div id="footer">
<p>Copyright © 2010 Denis Haryanto.</p>
</div>
Contoh pada document CSS-nya :
#footer {
width: 850px;
margin:0px auto;
padding: 3px 0px;
height: 50px;
border-top: 2px solid #FFFFFF;
background: #8fa819;
}
CLASS
Sedangkan Class dapat digunakan pada tag HTML yang tak terbatas penggunaanya. Class lebih fleksibel untuk diaplikasikan dibanding ID. Class biasanya berada diantara tag ID. Pada document CSS harus diawali karakter “.”. Untuk lebih jelasnya berikut ini contoh class.
<div id = âminumanâ>
<div class = "soda">coca cola</div>
<div class = "soda">sprite</div>
<div class = "hot">teh</div>
<div class = "hot">kopi</div>
</div>
Contoh pada document CSS-nya :
.minuman{
width: 850px;
margin:0px auto;
padding: 3px 0px;
height: 50px;
border-top: 2px solid #FFFFFF;
background: #8fa819;
}
Untuk penggunaan selector Class maupun ID tidak terbatas hanya tag div saja, namun juga bisa diaplikasikan dengan tag-tag HTML lainnya seperti <table>, <ul>, <body>, <h1>, dll.
Selamat belajar...
Postingan
Kelebihan Cloud Computing
10 tahun yang lalu
maksih mas saya jua kebetulan lagi nulis masalah ini Between Div and Class tolong dilihat apakah saya nulisnya dah bener
BalasHapus