CSS Tip: Cascade Order

Just thought I'd share some assorted things I've been learning in my DHTML/XML class.  These more or less come from my class notes and textbook.  Hopefully this makes sense, I'm tired and not feeling especially great.

Most modern browsers handle style sheets, but did you know they read your styles in a very specific way?

Here's the order that CSS styles are handled:

1.) Anything with the !important tag next to it is given top priority.

Example:

P {
font-size:16px !important;
font-family: arial, helvetica, geneva, sans-serif !important;
color: green;
}

By doing this, you can also override any stylesheets the visitor is using with their browser.  Just be sure to use this wisely and to not abuse it.  (Also be sure to put it BEFORE the semi-colon or it may not work right.)

2.) Does the style sheet belong to the Visitor or Author?
Most browser's today will favor any settings their user's settings.  That means that if they're using their own style sheet, it'll get higher priority than your's.

3.) The more specific the rule is, the more important it is.

There's an actual scoring system used to determine this.

• #IDs are the most specific. (100 points)
• .classes are medium (10 points)
• HTML tags are the least specific. (1 point)

These can also add up.

For example:

DIV = 1 point

.login DIV = 10 + 1 = 11 points

#header DIV = 100 + 1 = 101 points

#header .login DIV = 100 + 10 + 1 = 110 points

That would mean that the last one would get highest priority because it's the most specific.

4.) Last rule in the style sheet

The further down the page a set of css definitions are, the more important they are.  In other words, the last thing in your style.css file is actually ranked higher than things at the top.

5.) Existing or inherited attributes are the last things considered.

Existing attributes: the the bold tag normally makes something bold, italic tag makes things italic.  These sort of tags already apply a style to any text you use them on.

Inherited attributes: For example, if you embed one tag inside another, the inside tag inherits the style from the outer tag.

Like I said, hopefully that made sense.  If it doesn't, feel free to delete this and I'll try again when I'm not feeling half-dead.