CSS: The Missing Manual

External Style Sheets

An external style sheet is nothing more than a text file containing all your CSS rules. It never contains any HTML code—so don't include the <style> tag—and always ends with the extension .css. You can name the file whatever you like, but it pays to be descriptive. Use global.css, for example, to indicate a style sheet used by every page on the site, or use form.css to name a file containing styles used to make a Web form look good.

UP TO SPEED: Validate Your CSS

Just as you should make sure you've correctly written the HTML in your Web pages using the W3C HTML validator (see the box in Section 1.2.4), you should also check your CSS code to make sure it's kosher. The W3C provides an online tool for CSS checking as well: http://jigsaw.w3.org/cssvalidator/. It operates just like the HTML validator: You can type the URL of a Web page (or even just the address to an external CSS file), upload a CSS file, or copy and paste CSS code into a Web form and submit it for validation.

It's easy to make a typo when writing CSS, and one small mistake can throw all of your carefully planned designs out of whack. When your CSS-infused Web page doesn't look as you expect, a simple CSS error may be the cause. The W3C CSS Validator's a good first stop, when troubleshooting your designs.

You can also make a quick check using Firefox. Load the page that has the CSS you want to check and choose Tools → JavaScript Console. Click the errors button and you'll see listed any CSS code ...