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?
Example:
Markup:
<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.