cascading order of css

Basically there are three different types of css which can all be used in conjunction with each other.

Each type has a kind of pecking order from lowest to highest priority.

• External Style Sheet - Lowest priority.
• Internal Style Sheet - Higher priority than External Style Sheets.
• Inline Style - Highest Priority.

If you think of it in terms of soldiers in an army, the mass of soldiers all have a standard duty to uphold, a standard precedure to follow when they havn't been given any specific orders.

When you make a simple webpage in plain old html with no css, your browser will display it according to it's default settings which is pretty plain and boring, get out of your bunk at 6am, polish your boots, march around the block clockwise blah blah etc, etc....

external css

The styles of css are like orders given to these soldiers. An External style sheet is a single document containing all of your css or personalised orders to these soldiers and you can tell each of your seperate web pages to follow the orders according to that one style sheet. So now when the normal routine of the browser is to march around the block clockwise, but the external style sheet says march around block anti-clockwise the soldiers obey the orders given by css and march anti-clockwise replacing the browser's default routine.

internal css

Next we have Internal Style Sheets. An internal style sheet is a chuck of css or set of orders placed in the head of a particular single html document or webpage. While that individual webpage will still have orders to march around the block anti-clockwise, it also has orders specific to that page and those internal orders might say to jog around the block, and those orders, being internal, have a higher priority. All the soldiers on this page obey the internal orders of thier page, so while the rest of the pages are marching, these poor buggers are jogging. The internal orders didn't specify which direction to run however so they still follow the anti-clockwise part of the external stylesheet order, so they are jogging around the block anti-clockwise. Making sense?

inline css

Next we have Inline Style. While all of your webpages are following your standard procedure you laid out in your external stylesheet, and one of your pages is following a modified procedure you laid out in your internal style sheet, you might want one particular soldier on the page to do pushups instead, so for this you use an inline style, this is one specific css order placed inside one specific html tag and it's a direct order given to one soldier, so everybody else on that page keeps jogging, this soldier has his standard orders to jog like the rest, but direct orders from his commanding officer are obeyed instead and so this poor bugger is on the floor doing pushups.

the cascade

These three styles are said to "cascade" into one style sheet, following direct "inline" orders first, if no direct orders are given then they follow the "internal" orders, if no internal orders are given they follow the "external" orders, if no external orders are given, they do what evertbody else does.

Well I'm sure you're getting a bored with theory by now, so when you're ready to take a look at some actual css code, click here for the next lesson.

Lesson added Tuesday 16th December 2008