CSS Hierarchy - How it Works

CSS has come a long way. We have gone from nested tables that were hard for the browser to render quickly to CSS styling that can easily and quickly control the layout of our web pages.

So how do we know what CSS takes precedence over what?

With CSS we can provide 4 ways to reference our styles:
 
    1.) External style sheet
    2.) @import within a style sheet
    3.) Internally within the head of a web document
    4.) Inline within an element of an html document
 
So in order to understand what takes precedence, we need to understand how the CSS document hierarchy works. Two things are going to happen, one is the browser will us the most specific or most weighted styling to an element if there is a conflict, and two it will choose the style which is closest to the element or written lower down and give that precedence. So it's important to understand that style sheets are applied in the order in which they appear in your HTML document. The last style mentioned will have precedence unless of course as we said earlier if there is a conflict then the browser uses the most specific styling. You can also use the !important declaration to give precedence but IE does not support this.