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 importing some 3 to 4 CSS files in each HTML page. The problem is I have duplicate classes that defined in some CSS files. That means I override some of the CSS classes in the CSS files. In some pages it behaves correctly. In some pages it behaves wrongly. I have inline styles defined for some of the DIVs in HTML page also. I am keeping CSS class for that DIVs also.

Can anyone know which one will take higher priority or which one loads first ?

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.