The order of external CSS

The order of including the external CSS files is very important.

What if the specificity of two statements for the same elements are the same?


<body class="tundra"><div id="TabContainer"><span class="abc">Content...

CSS file main.css:
.tundra #TabContainer {color:#FFF}
CSS file container.css:
#TabContainer .abc {color:#000}

We have 2 css statements with the same specificity: 0,0,1,1. Which one will be applied?

The CSS rules says: Last one

That means:
<link type="text/css" rel="stylesheet" href="main.css" />
<link type="text/css" rel="stylesheet" href="container.css" />
for this order of loading the CSS files the content will be 'white',

<link type="text/css" rel="stylesheet" href="container.css" />
<link type="text/css" rel="stylesheet" href="main.css" />
for this order the content will be 'black'.

Attention: not knowing or ingoring these simple rules and the rules from the previous page can be a cause of many visual representation problems.

There is an alternative way to include external CSS statements:
<style> @import url('some.css');</style>

The @import at-rule was designed as a mechanism for importing one style sheet into another. There is no reason to use it instead of <link> element. Additionaly, css style that goes from the url of <link> is cached by the browser.