HTML page calls two import css

Question

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

Answer 1

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/

Answer 2

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.

Answer 3

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).

Answer 4

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

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