* { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; } body { background-color: black; } .badan { width: 880px; margin: 35px auto; background-color: white; padding: 20px; overflow: hidden; } .badan h2 { color: crimson; border-bottom: 1px solid gainsboro; margin: 5px; margin-bottom: 13px; } .list-produk { border: 1px solid gainsboro; padding: 10px; float: left; width: 200px; margin: 5px; } .list-produk:hover { transition-duration: 700ms; box-shadow: 5px 5px gainsboro; } .list-produk img { width: 100%; height: 175px; display: block; margin-bottom: 5px; } .list-produk h4, .list-produk h5 { color: crimson; text-align: center; margin-bottom: 5px; } .tombol { text-decoration: none; border-radius: 7px; padding: 7px; display: block; float: left; width: 45%; margin: 4px; text-align: center; color: white; } .tombol:hover { background-color: black; transition-duration: 700ms; } .tombol-detail { background-color: green; } .tombol-beli { background-color: crimson; }
Skip to content Skip to sidebar Skip to footer

Bedanya Class dan Id di tag HTML

Apa sich bedanya tag Id dan Class di dalam attribut script HTML..??. Terkadang kita bingung perbedaan dari kedua elemen tersebut. Padahal dari sisi fungsi kedua atribut tersebut sama. Yaitu mengarahkan Style format menuju CSS yang ditentukan. Ternyata kedua tag tersebut berbeda dan mempunyai fungsi berbeda juga.
Coba anda perhatikan kode script dibawah.
Kita coba menggunanakan href CSS yang sama.

.semua_kotak {font-family:tahoma, verdana; font-size:12px;}
#kotak_kiri{border:20px;width:200px}
#kotak_tengah {border:20px;width:400px}
#kotak_kanan{border:20px;width:300px}
<div id="kotak_kiri" class="semua_kotak">
ini adalah kotak sebelah kiri.
</div>
<div id="kotak_tengah" class="semua_kotak">
ini adalah kotak sebelah tengah.
</div>
<div id="kotak_kanan" class="semua_kotak">
ini adalah kotak sebelah kanan.
</div>
Dari contoh di atas dapat kita fahami bahwa tag Class dapat digunakan untuk banyak Tag HTML, Tetapi tag id hanya berlaku untuk 1 tag saja. Keuntungan menggunakan tag Class ini adalah kita tidak perlu membuat banyak properti Style yang sama berulang-ulang dalam CSS. Kita mempergunakan tag id hanya jika kita mau memberikan style pada tag HTML tertentu saja.
Sample diatas menjelaskan bahwa semua kotak memiliki style font Tahoma berukuran 12 pixel. Sedangkan id menginstruksikan kotak untuk memakai ukuran lebar masing-masing. Kotak kiri dengan lebar 200pixel, tengah 400pixel, sedangkan kotak kanan mempunyai lebar 300 pixel.

Itulah sedikit penjelasan mengenai penggunaan tag Class dan id dalam Mata Pelajaran Bahasa Inggris, haha.. Bahasa HTML maksudnya. Kalau penjelasan Kang Mis terlalu ruwet maaf ya. Moga aja bisa difahami. :)


m