Question

I have the same rule which the first is in external .css file and the second is internal via …
In the ex

.img1 { background-image: url("....") !important; }
<– declared inside .css file and added via to the code

.img1 { background-image: url("....") !important; } <– declared inside the code via in the part.

It seems that the external + important overides the internal + important.

How come? and what can be done to fix it besides taking off the important! rule in the external css rule

Thanks

Answer 1

sounds like this is about the css selector-precedence, wich is basically:

• if different rules apply to the same element, the more specific rule is used (p.class is better than just .class)
• it the rules are the same, the later one is used
• rules containing !important are preferred over the “normal” ones everytime
• if two rules containing !important apply to the same element, the more specific one or the later one is used

to read more about this, take a look at http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

later = further down in the came css-file or content of the css-file included further down in the same html-document.