Different levels of CSS and the priority over each other

Question

I was reading a decent article here on this topic: http://www.plus2net.com/html_tutorial/css-types.php It came out highest ranked by Google for the search term css style sheets

Answer 1

Rather than thinking of it in terms of most important and least important, think of it as cascade order. All the styles are applied, but the last applied one is the one which you see. Styles are applied in the following order:

1. Browser default
2. External style sheet (link or @import)
3. Internal style sheet
4. Inline style

Within any one of the first three, styles are applied from least specific to most specific (then from top to bottom if the most specific can't be determined). So a tag-selected style will be applied before a class-selected style, so if they disagree about what style should be applied, the class-selected one will win. There is no rule about whether link or @import should be applied first, so they are mixed together and the least-specific-to-most-specific rule applies.

!important makes a less specific style get applied after a more specific one, and an external style sheet style get applied after an internal one or an inline style. I would advise against using !important wherever possible though, as it can cause some pretty confusing results.