Search code examples
htmlcsscss-selectorsstylesheet

External stylesheets are overriding internal, even with the same selector

I have 2 pages (SignIn and PasswordReset) and an external CSS file (named MainStyleSheet.css). I have some HTML elements in my pages which all have a class (named ab-control-container). In both pages, I need to override some stylesheet for the class ab-control-container.

The problem which is confusing me is that in the in the first page (SignIn), internal stylesheets are overriding the external as I excepted, but in the second page (PasswordReset) those internal stylesheets which is as the same as stylesheets of the first page, are NOT overriding external.

this is what Chrome Inspect Element tool shows: first page:

firstpage and the second page: !

enter image description here What is the problem and Why?

Solution

  • internal stylesheets are overriding the external as I excepted

    <style> elements do not have priority over <link>ed stylesheets in the cascade.

    You might be getting confused with style attributes (which have higher specificity than any ruleset).

    When two rulesets have selectors with equal specificity (and these do, they selectors are completely identical!) then later ones override earlier ones.

    You need to change the order the stylesheets are loaded in, or the specificity of the selectors.

    See the cascade for more details.