CSS 101 | Part Four - The CSS Order of Precedence

Welcome to Part Four of the CSS 101 series - The CSS Order of Precedence. Before we delve too far into the fabulous world of CSS, I feel I should go over the order in which CSS styles are applied and which type of style takes precedence. It can be quite frustrating if you don't know this, as you'll write styles, and - because of some little technicalities, which we'll discuss imminently - these styles won't take effect. You'll then be wondering what the hell is going on. So let's get down to business.

The order of precedence for the various types of styles

As you'll know from Part One (or you may know already, even if you haven't read Part One), there are three places where we can put CSS:

• As inline styles - styles applied directly to an element, via the style attribute.
• As embedded styles - styles placed within the style tag, which goes in the head of your document.
• In an external stylesheet - a file with a css extension, which is referenced in the head of your document (more on linking to external stylesheets here).

CSS cascades - that is, certain CSS declarations naturally override other declarations. The order of precedence for the three types of style are as follows:

• Inline styles
• Embedded styles
• External styles

Inline styles take priority over embedded styles and external styles. Embedded styles take priority only over external styles.

If you have a class in an external stylesheet, and use that same classname in an embedded style, the embedded style will take precedence. If you apply a class to an element, then attach an inline style to that element, the inline style will take precedence.

It's also useful to note that external stylesheets placed underneath each other also cascade - that is, the styles in the lowest stylesheet overrides those in the higher stylesheets.

The order of precedence for the various CSS selectors

From Part Two you learnt that CSS uses selectors to target specific elements that are to be styled. If you are unclear about the function of the selectors, please visit CSS 101 | Part Two - The CSS Selectors.

Different selectors naturally override others. Here is in order in which this takes place:

• The ID selector
• The attribute selector
• The class selector
• The child selector
• The adjacent sibling selector
• The descendant selector
• The type selector

The ID selector overrides all the selectors; the attribute selector overrides the class selector, the child selector, the adjacent sibling selector, the descendant selector and the type selector; the class selector overrides the child selector, the adjacent sibling selector, the descendant selector and the type selector; the adjacent sibling selector overrides the descendant selector and the type selector; the descendant selector overrides the type selector (what a mouthful!).

What order are declarations applied in?

We briefly touched on this in the last instalment, but I'd like to go over it more thoroughly. CSS styles are applied in a descending fashion. The style that comes last is the one that takes precedence (taking into consideration the order that the selectors are applied and which type of style it is - inline, embedded or external). If you're placing two classes on one element and both classes are in the same stylesheet, the second class (which is further down within your styles) will override the first class. If, however, one style is in an external stylesheet and the other is in an embedded style, the class within the embedded style will take precedence.

How to override styles

When overriding styles, think logically about how you are using them. It could be as easy as switching the order of styles, moving embedded styles into a stylesheet, or creating declarations for inline styles (a class, or a style using the ID selector, maybe?). However, if neither of those solutions are possible, there is still a way to control which style is applied, and this is by using the !important keyword. !important will override any other style, from anywhere - even if the other style is applied using the ID selector, or as an inline style.

How to use !important

!important is applied to the end of a CSS rule, before the semicolon.

     	.ankh {
        	background: black !important;
        }
     

This class will override any other styles applied to the same element.

Note, !important can be spelt either as !important or !Important. It's down to personal preference.

And that's it for Part Four. Hopefully this hasn't been too complicated to grasp (if it has, drop me a line and I will try to clear things up for you).