css 101

Using External Stylesheets

At the beginning of this tutorial we showed you how to "inline" styles, attaching them directly to an element on a page. While this works in a pinch and actually makes sense to do in certain circumstances, for the most part you'll want to avoid that technique, since you end up adding stylistic information directly into the document, sidestepping one of the major advantages of using CSS.

Throughout most of the tutorial, we've been adding style rules to a "styles" block at the top of your document's HTML. That's much better, but really only makes sense for single-page sites. If you have a three-page site (or a 3,000-page site), do you really want to reproduce (and keep updated) the style data on every single page? Of course not.

The real win is in using a single stylesheet to control visual display for an entire site. That way you have just one place to make style changes, and those changes will be reflected across your entire site immediately, no matter how large it is. Here's how:

Create a new document in your site's document root, called styles.css (or anything you like). Copy the style rules out of the top of the document you've been working on and into the new file. Copy only the actual style rules, NOT the lines:

Save styles.css, then remove the entire style block from the top of the HTML document. Now, paste this somewhere in the section of your HTML document:

Obviously, edit /path/to/styles.css to match the actual path to the stylesheet on your site. If you don't understand relative paths, just make sure the stylesheet is in the same folder as the HTML document and refer to it as simply "styles.css." Reload the web page, and all of your styles should still be intact, even though there's not a shred of CSS in the entire HTML document.

OK, here comes the cool part. Save your existing HTML document with another filename, and make some changes to it. Create standard links between the two pages. Load the new document up in a browser, and bingo - it will have all of the same styles. Click back and forth between the two to verify that the styles are identical between the two.

To use a site-wide stylesheet, all you need to do is link every document on your site to that central stylesheet and you're in business. Change something in the stylesheet, and all pages are updated automatically.

You should now be able to do basic stylistic decoration of your web pages, without adding any stylistic information to the document itself. Congratulations! Now it's time to move on to CSS page layout. We'll cover that in our next tutorial, CSS 201 (coming soon). Until we've got that online, please read Creating a CSS layout from scratch.