Berarti styling Anda ter-replace oleh styling lain. Simak beberapa sebabnya berikut.
Di CSS juga berlaku hukum rimba, siapa lebih kuat dia yang hidup. Apabila ada dua styling untuk satu sasaran yang sama, styling yang lebih kuat lah yang terpakai.
CSS susunan kuat ke lemahnya dibagi menjadi:
1. Tingkat kedetailan selectornya
misal ada selector ".box p{ color : red }" dan selector "p {color : blue}", maka yang terpakai adalah ".box p". Dikarenakan selectornya lebih detail.
2. Letak styling di stylesheet.
misal ada style "h1 { font-size: 20px; } dan di bawahnya ada style "h1{ font-size: 25px; }, maka yang dipakai adalah yang kedua, atau yang bawah. Dengan kata lain, bila ada dua selector yang sama maka yang dipakai adalah yang ada di bawah.
3. Cara styling-nya
Dalam CSS ada 3 cara styling, yaitu inline styling, styling dalam tag <style>, dan styling dalah stylesheet terpisah.
Inline styling ini lebih "kuat" dibanding dua cara lainnya. sehingga apabila ada style "p { text-transform : uppercase; }", sedangkan di tag <p> nya ada inline stylenya -> "<p style="text-transform: normal">", maka yang dipakai adalah inline styling-nya.
4. !important
Ini adalah cara yang paling sakti, mau bagaimanapun juga, kalau di styling nya ada !importantnya, dialah yang akan terpakai. Contohnya "p{ font-weight : bold !important; }".Bila ada dua atau lebih styling yang sama-sama ada !importantnya maka ketiga hukum sebelumnya diatas akan berlaku kembali.
Dan.., sebaiknya cara ini jangan terlalu sering dipakai.
Conclusion
Jadi, styling mana yang dipakai akan ditentukan oleh beberapa cara. Apabila Anda memakai plugin atau framework CSS, Anda mungkin bingung kenapa styling Anda tidak berlaku, kemungkinannya CSS dari plugin/framework CSS-nya lebih "kuat" dari styling Anda. Coba ditelusuri, bisa dengan memanfaatkan inspect element.
