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. In addition, always end the file name with the extension .css. You can name the file whatever you like, but it pays to be descriptive. Use global.css, site.css, or main.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 on Tips to Guide Your Way), 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/css-validator/. 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 is a good first stop when troubleshooting your designs.

You can also do a quick check using Firefox. Load the page that has the CSS you want to check and choose Tools → Error Console. Click the Warnings button, and you'll see listed any CSS code that Firefox doesn't understand.

Tip

If you have a page with an internal style sheet but want to use an external style sheet, then just cut all of the code between the <style> tags (without the tags themselves). Then create a new text file and paste the CSS into the file. Save the file with a .css extension—global.css, for example—and link it to your page, using one of the techniques described next.

Once you create an external style sheet, you must connect it to the web page you wish to format. You can attach a style sheet to a web page using HTML's <link> tag or CSS's own @import directive—a command that basically does the same thing as the link tag. All current web browsers treat these two techniques the same, and both let you attach style sheets to a web page, so choosing one is mostly a matter of preference.

Note

The @import directive can do one thing the <link> tag can't: attach external style sheets to an external style sheet. This advanced technique is discussed on Tutorial: Creating Your First Styles.

Linking a Style Sheet Using HTML

The most common method of adding an external style sheet to a web page is to use the HTML <link> tag. You write the tag slightly differently depending on whether you're using HTML or XHTML. For example, here's HTML:

<link rel="stylesheet" type="text/css" href="css/global.css">

Here's XHTML:

<link rel="stylesheet" type="text/css" href="css/global.css" />

The only difference is how you end the tag. The link tag is an empty element, since it has only an opening tag and no matching, closing </link> tag. In XHTML, you need to add a closing slash (like this: />) to terminate the tag; HTML doesn't require the extra slash.

Otherwise, the link tag is the same in HTML and XHTML and requires three attributes:

rel="stylesheet" indicates the type of link—in this case, a link to a style sheet.
type="text/css" lets the browser know what kind of data to expect—a text file, containing CSS.
href points to the location of the external CSS file on the site. The value of this property is a URL and will vary depending on where you keep your CSS file. It works the same as the src attribute you use when adding an image to a page or the href attribute of a link pointing to another page.

Tip

You can attach multiple style sheets to a web page by adding multiple <link> tags, each pointing to a different style sheet file. This technique is a great way to organize your CSS styles, as you can see in Chapter 15.

Linking a Style Sheet Using CSS

CSS includes a built-in way to add external style sheets—the @import directive. You add the directive inside of an HTML <style> tag, like so:

<style type="text/css">
@import url(css/global.css);
</style>

Unlike HTML's <link> tag, @import is part of the CSS language and has some definite un-HTML-like qualities:

To make the connection to the external CSS file, you use url instead of href and enclose the path in parentheses. So in this example, css/global.css is the path to the external CSS file. Quotes around the URL are optional, so url(css/global.css) and url("css/global.css") both work.
As with the <link> tag, you can include multiple external style sheets using more than one @import:
```
<style type="text/css">
@import url(css/global.css);
@import url(css/forms.css);
</style>
```
You can add regular CSS styles after the @import directives if you want to create a rule that applies just to that one page, but still use the site's global design rules to format the rest of the page.

Note

You'll learn how rules interact and how you can create a rule that overrides other rules on Selective Overriding. You can even create an external CSS file that contains only @import directives linking to other external style sheets, a technique often used to help organize your styles (see Specifying the Media Type for an External Style Sheet).

Here's an example:

<style type="text/css">
@import url(css/global.css);
@import url(css/forms.css);
p { color:red; }
</style>

Technically, you should place all the @import lines before any CSS rules, as shown here, but it's okay if you forget. Web browsers are supposed to ignore any style sheets you import after a CSS rule, but all current web browsers ignore that restriction.

Which to use? Although both methods work, the <link> tag is more common. In a few cases, using the @import technique can slow your style sheets' download speed (visit www.stevesouders.com/blog/2009/04/09/dont-use-import/ to find out when this can happen and why). So, if you don't have a strong preference for either, just use the <link> method described on Creating an External Style Sheet.