CODEWITHSUNDEEP
css
Allam Kalyana
Allam Kalyana

Reputation: 31

HTML page calls two import css

There are two import urls being called 

@import url(SiteA.css);
@import url(SiteB.css);

SiteA.css has div {border-color: blue;}

SiteB.css has has div {border-color: red;}

what would the border color would it be blue or red , which wins SiteA.css or SiteB.css

Upvotes: 0

Views: 44

Answers (4)

Allam Kalyana
Allam Kalyana

Reputation: 31

Thanks all , I read this post now I understand the last wins

http://www.blooberry.com/indexdot/css/topics/cascade.htm

Upvotes: -1

X. Tamis
X. Tamis

Reputation: 364

HTML will read and execute the code going from top to bottom. Because importance or specificity isn't defined in your CSS, the stylesheet that gets called lower in the file overwrites the stylesheet above it.

So in this case, the second stylesheet will overwrite the first and the border will be red.

Example:Code:

Upvotes: 1

Kjvhout
Kjvhout

Reputation: 494

The last called styling will overwrite all the above. CSS will run from top to bottom. This means that the styling on the bottom will overwrite the styling above, unless you use !important. So to answer your question, the border will be red.

If you don't now how !important works you can read the following article: https://css-tricks.com/when-using-important-is-the-right-choice/

Upvotes: 1

Heba Fareed
Heba Fareed

Reputation: 437

Definitely SiteB.css wins as it comes after the other one, CSS rules are overwritten by order (unless you use !important or use more specific selectors).

Upvotes: 0

Related Questions