Belajar HTML Sederhana - ID dan Class

Reading - Halaman 2 »
Pada tutorial kali ini saya akan menjelaskan fungsi dan cara kerja dari ID dan class pada CSS Style. Ini adalah coding sederhana dan hanya saya tujukan untuk sobat blogger yang baru mengenal apa itu coding dan juga bagi para sobat blogger yang mungkin lupa akan hal ini.

Untuk ID penggunaannya ditandai dengan sebuah kode singkat id="" yang disisipkan pada kode html. Seperti <div id="footer">TEKS</div>. Begitujuga dengan CLASS yang kehadirannya ditandai dengan class="" seperti <div class="footer">TEKS</div>

Keduanya berperan hampir sama dalam bahasa html, seperti yang sering kita jumpai pada sebuah template blog banyak yang menggunakan salah satu tag tersebut atau bahkan menggunakan keduanya dalam satu baris kode html.
Pada CSS Style, ID dikaitkan dengan  tanda pagar (#), sedangkan untuk CLASS dikaitkan dengan tanda titik (.)
Sebuah CSS harus dikurung dengan awalan <style> dan akhiran </style>

Contoh:
<style>
#namaID {isi-css}
.namaCLASS {isi-css}
</style>

Saya akan memberikan sebuah studi kasus jika Anda menggunakan kedua tag ini dalam satu baris kode html seperti berikut:
<div id="namaID" class="namaCLASS">Tag Mana Yang Akan Menang</div>
<style>
#namaID {color:RED}
.namaCLASS {color:BLUE}
</style>
Yang menang pasti color:RED (warna merah). Mengapa demikian?
Karena ID lebih kuat dibandingkan dengan CLASS

Studi kasus bagian 2
<div id="namaID" class="namaCLASS">Tag Mana Yang Akan Menang</div>
<style>
#namaID {color:RED}
.namaCLASS {color:BLUE !important}
</style>
Yang menang pasti color:BLUE (warna biru). Mengapa demikian?
Karena pada CSS untuk BLUE ditambah dengan IMPORTANT (penting). Dengan adanya ini maka kita memaksudkan bahwa warna biru lebih penting untuk ditampilkan daripada warna merah.
URL

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini