Section 2.4. External Style Sheets | Dreamweaver CS3: The Missing Manual

2.4. External Style Sheets

An external style sheet is nothing more than a text file containing all your CSS rules. It never contains any HTML codeso don't include the <style> tagand 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 youll 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 exampleand 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 directivea 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. (For the one exception, see the box below.)

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 in Section 14.2.3.1.

WORKAROUND WORKSHOP
Too Old to @Import

You can link external style sheets to Web pages using either an HTML <link> tag or the CSS @import directive. The only time it makes a difference is when your visitors use certain older browsersnotably Netscape Navigator 4.

This very old browser usually mangles CSS, even to the point of rendering Web pages unreadable.

Navigator 4 also doesn't understand the @import directive and ignores any style sheets linked this waya fact that you can use to your advantage. If you always use the @import method, then Navigator 4 doesn't try to display the page using those CSS styles. Your Web pages don't look as good for those visitors, but at least they're readable.

2.4.1. Linking a Style Sheet Using HTML

One 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's 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's the same in HTML and XHTML and requires three attributes:

rel indicates the type of linkin this case, a link to a style sheet.
type lets the browser know what kind of data to expecta text file, containing CSS.
href points to the location of the external CSS file on the site. The value of this property is an URL, and 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's a great way to organize your CSS styles, as you can see in Chapter 14 (Section 14.2.3.1).

2.4.2. Linking a Style Sheet Using CSS

CSS includes a built-in way to add external style sheetsthe @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.

Note: Not only does quoting the path of an URL in CSS add a couple of extra characters to the file, Internet Explorer 5 for the Mac has trouble understanding URLs with quotes.

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, for example, you want to create a rule that applies just to that one page, but take advantage of the same design rules used throughout the site 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 in Section 5.3. 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 Section 14.2.3.1).

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.