QUICK TUTORIAL - THE CASCADE
Cascading Style Sheets
In the term "Cascading Style Sheets" the "Cascade"
refers to the way all of the factors which control the display of your
page "cascade" like a waterfall, in lots of small steps, each
one contributing something to what you end up seeing.
Your computer, your browser, your personal preferences, the HTML and its attributes, three levels of "styles", and finally, the "level of specificity" each affect the final outcome.
How the "Cascade" Works
Let's say your browser has a default background of white unless otherwise
specified. (Early browsers were set to grey!)
Then let's say you set the background color in the body tag to yellow: <body bgcolor="#FFFF00">. The page will render with a yellow background, because the HTML tag overrides the browser default..
If you then set the background color of this same page to blue in a linked external stylesheet, the page will render blue. The linked (or external) stylesheet overrides the HTML tag.
If you then set the background color of this same page to red in a style embedded in the <head> section of your page, the page will be red. The embedded (or internal) style overrides the external stylesheet.
If you then set the background color of this same page to gold in an inline style placed directly inside the body tag, the page will be gold. The inline style overrides the embedded style.
If you have a section with a certain id, and within that section you have a certain class, like this: #leftnav .subnav, and you want to override one particular instance of .subnav with an embedded style, you'll have to be just as specific. In the embedded style, you won't be able to say .subnav {color: red}, you'll have to say #leftnav.subnav {color: red}. Otherwise, the more specific style takes precedence.
Whew!
To RECAP:
- Linked or External Stylesheet is a separate file (for example "mystyle.css") which is linked from the <head> section of your page. This is the most efficient way to use styles. You change the way the browser renders the look-and-feel of the content in HTML tags from a central place. If you want to change the whole site, you need only change this page, not every page in the site. In a site containing hundreds or thousands of pages, this is useful, to say the least.
- Embedded or Internal Styles - These go in the <head> section of your page, and should override the linked stylesheet. This is useful if you have only one page in your site or if you want to change a particular style declaration on a few pages only.
- Inline Styles, which you can put inside your HTML tags. Inline styles are the last step of the cascade, and should override both Internal Styles and External Stylesheets. They are useful when you want to change the look of a single element only. If you use the same inline style more than once, you should put it on your embedded or linked styles. Otherwise you lose the advantage that styles have over straight HTML.
If you are interested, there are many good tutorials available on the web that can teach you more about styles. Try these for starters:
Adding a touch of style - a surprisingly good intro to styles from the W3C organization. Readable. Really.
Webmonkey - Webmonkey has long had the best tutorials around (irreverent, clear) but they have been overrun by advertising lately.
A List Apart - has the best articles about the web, bar none. Much good information about style sheets.
The Complete CSS Guide - and it is.