Posisi CSS Style Dapat Mempengaruhi Fungsi Coding

Author : Sigit Purnomo | Released : December 09, 2015 | Category :
« Halaman 1 - Reading
Jika Anda memiliki dua tag yang sama dan isi css_nya juga sama untuk satu kode html, maka salah satu dari css tersebut tidak akan berfungsi.
Ini tidak hanya berlaku untuk dua CSS Style saja, bahkan jika kebetulan Anda memiliki 10 css sekalipun maka hanya akan satu saja yang dapat berfungsi.

Studi kasus 1
<p id="TES">CSS Mana Yang Akan Menang</p>
<style>
#TES {color:red}
#TES {color:blue}
#TES {color:yellow}
</style>
Pada contoh diatas CSS yang akan menang adalah color:yellow (warna kuning). Mengapa demikian?
Karena urutan peletakan (posisi) yellow berada di bagian terbawah, itulah sebabnya dia yang akan ditampilkan.

Studi kasus 2
<p style="color:pink" id="TES">CSS Mana Yang Akan Menang</p>
<style>
#TES {color:red}
#TES {color:blue}
#TES {color:yellow}
</style>

Pada contoh diatas CSS yang akan menang adalah color:pink (warna merah muda). Mengapa demikian?
Karena html akan mengistimewakan sebuah css yang diletakkan langsung pada kode html tersebut daripada yang diletakkan dalam bungkusan <style></style>

Google+

Linkedin

Silahkan berkomentar sesuai topik yang dibahas