What is the order of loading the CSS files in a HTML page?

Question

I want to know the order of loading the CSS files in a HTML page.

My actual requirement is like this: I have more than 10 CSS files in my application.

I am i

Answer 1

Generally the last rule takes precedence. With that being said, there are "exceptions" in that inline styles take precedence over external stylesheets ( an inline !important is more important than an external !important, etc ), and more specific selectors override generic selectors.

Read all about it @ http://www.w3.org/TR/CSS2/cascade.html

Answer 2

CSS files are loaded in the order that they appear in the page. If a class is redefined in a CSS file, it will override the previous class statements.

So
div.sample { background: none; width: 200px }
and
div.sample { color: #FFF; width: 400px }
will become
div.sample { background: none; color: #FFF; width: 400px }

You can also use the '!important' addin to make rules take precedence over other defined rules.

So
div.sample { background: none; width: 200px !important }
and
div.sample { color: #FFF; width: 400px }
will become
div.sample { background: none; color: #FFF; width: 200px !important }

Note: Many people will advise against using the '!important' addin in your CSS files. Personally, I see nothing wrong with it.

Answer 3

Each element will be rendered based on the properties from the last style-sheet from which it has been selected. Properties which have been declared as !important; are an exception. Part of the problem is that you have 10 style-sheets.