Understanding CSS Hierarchy


Tags:

As websites and the applications that power them become more complex so to does the ability to easily change their appearance.

CSS (Cascading Style Sheets) are now extremely widely utilised for styling and controlling the layout of web pages, but not always easy to work with. Apart from browser inconsistencies (which we won't be discussing in this article) if you are using multiple style sheets and perhaps some inline styling how do you figure out what takes precedence over what?

Defining Styles

Via CSS styling can be assigned in three different ways:

  1. External - within an external style sheet.
  2. Internal Within the HTML document <head>.
  3. Inline - within an element

Example

Lets say that we want to apply some styling to our <h2> HTML tag

In an external style sheet we have the following:

h2 { color: #ccc; text-align: left; font-size: 14pt; }

Internal styling applied in the document <head> sets the following:

<head>
<style type="text/css">
h2 { color: #555; text-align: center; font-size: 14pt; }
</style>
</head>

On a particular instance of the <h2> tag we set the following:

<h2 style="text-align: right;">My Heading</h2>

The above will result in the following code being applied to this particular instance of the <h2> tag:

h2 { color: #555; text-align: right; font-size: 14pt; }

From this example we can draw the conclusion that styling is applied in following order, External » Internal » Inline with the most specific styling applied to the element if there is a conflict:

Multiple External Style Sheets

But what happens when conflicting styles are applied to an element by multiple external style sheets? The answer is really quite simple. As I mentioned above the most specific style is applied. What this means in this case is that the style which is closest to the element takes precedence.

Style sheets are applied in the order in which they appear in your HTML document.

If we had the following contained in the head of our document and they were all applying styling to a specific attribute of the same element then the code in style3.css would be applied:

<style type="text/css" media="all">@import "style1.css";</style>

<style type="text/css" media="all">@import "style2.css";</style>

<style type="text/css" media="all">@import "style3.css";</style>

!Important Note

We have spoken about some basic rules about hierarchy within CSS, but rules ore meant to be broken - so they say.

Well, CSS is no exception. There are times when you may want to ensure that a particular style is applied and not remove by other style sheets, Internal or Inline styling.

In our <h2> example above if we wanted to ensure that the color applied by the External sheet was not modified we could have used:

h2 { color: #ccc !important; }

This would ensure that that this element would take precedence. Just a word of warning though. I know I said that I wasn't going to talk about browser inconsistencies, but in this case I need to, as you guessed it IE doesn't play well with !important.

But the problems are easily avoided if a little bit of care is taken. IE will, however, respect the !important declaration if they are not in the same selector:

What I mean by this is that the following will result in the <h2> being red:

h2 { color: red !important; }
h2 { color: blue; }

But this will result in the <h2> being blue:

h2 {
color: red !important;
color: blue;
}

I would suggest that !important be used sparingly, but there are certainly applications where it can become very handy. One such example that I can think of is Gallery 2 color packs. All the selectors have the !important declaration applied to ensure that they take precedence over the default style sheets.