CODEWITHSUNDEEP
htmlcsscss-selectorsstylesheet
Arad
Arad

Reputation: 12852

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?

Upvotes: 0

Views: 84

Answers (2)

Johannes
Johannes

Reputation: 67778

Seems like PasswordReset has the internal CSS much earlier in the code (line 19) than SignIn (line 621). From that i assume that the external stylesheet is referenced somewhere between those positions, which produces a different order of rules (with the later ones overwriting preceding ones).

Move the internal CSS in PasswordReset further down, below the line that references the external stylesheet, this should fix it.

Upvotes: 1

Quentin
Quentin

Reputation: 944320

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.

Upvotes: 1

Related Questions