Web Development Blog
Web Design Blog

Web Development Blog


ead and contribute on what is new and trending in the web design and web development community. We hope you frequent this blog and comment as well as mention any trends you find interesting.


CSS Hierarchy - How it Works - Web Development Blog

Return to the Blog

CSS Hierarchy - How it Works

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.

Posted by Web Design and SEO on Thursday, January 27, 2011 at 09:41

Please leave us a comment or ask a question below:

comments powered by Disqus

Back Home

Powered by Los Angeles Web Design
Copyright ©2004 - 2012 Hieroweb Interactive

To discuss your web design and marketing needs use our contact form or call us at 805-582-2081. Top


Related Pages