"Location, Location, Location!"
These where the three top things to consider when starting a new business back in the 1950's and the three most important considerations in today's real estate market. "But they're all the same thing" you say. Well thats just how important the location or "placement" was or is considered to be. Where you place your style sheet rules is just as important.
There are three places to locate your style sheets and where you choose to do so will effect just how useful they are to your site. The first is an externally located style sheet. That is a separate document that you link to or import into your web page(s). The next is and embedded style sheet that exists right in the head portion of the document you plan on using it in. And last but not least, the inline or as I like to refer to them as, the "point of use" style.
External style sheets are a good example of the cascading part of the "cascading style sheets" term. These separate files can be used to design the look of a whole web site such as this one. The look cascades through-out the whole web site or the page(s) they're linked or imported into. One of the nice advantages to this is if you would like to change some style in your site, you only have to change it in that one file and the change will cascade through-out the entire site. Sure beats having to change it in a hundred pages. Another great advantage to doing it this way is that external file only has to be down-loaded once. It can then be used by all the other pages without having to be down-loaded again. That surely cuts down on the size of subsequent pages.
Here's one more great thing about external style sheets. Say you have a web site with two or more distinct sections, you would like an overall look for the web site but each section has a look of its own beyond the sites basic look. You can have one style sheet for the whole web site look and then import only (not link) this style sheet into the style sheets for each of the other sections. Sure beats re-defining the same rules over and over again. Here's a visual example of what I'm talking about:
A picture isn't enough? Seeing is believing? What to see it in action? Well how about this page with an imported style sheet that will change the background to black. Click HERE to see it in a new window. When you're through viewing it just close that page or this one. Don't worry if you stick with the black background one, it'll go back to white when you go to the next page.
