Importing External Style Sheets

You can also call on an external style sheet by importing it.

To import an external style sheet:

Within the style element (see page 131), but before any individual style rules, type @import "external.css";, where external.css is the name of your CSS style sheet (see step 3 on page 128) (Figure 8.15).

Figure 8.15. The @import rule must be placed before any individual style rules in style element. It may come after other @import rules.

Tips

• The @import rule can also be written as @import url(external.css); or @import url("external.css");. Regardless, always put it before any other style rules in the style element and don't forget the semicolon.

• Style rules in an imported style sheet take precedence over any rules that come before the @import rule (for example, rules in earlier @import rules or in external sheets placed before the style element).

• You may use the @import rule in an external style sheet (as always, before any other style rules).

• The @import rule has been used as a way to hide CSS rules from buggy browsers, in particular Netscape 4 (Figure 8.14). For example, you could link to style sheets with rules that Netscape 4 understood and then import style sheets with advanced techniques it couldn't handle.

  Figure 8.14. Some very old browsers not only didn't support particular CSS features but would create something hideous instead. Such was the case of Netscape 4.x and borders. Look how it created those charming little boxes instead of the borders we asked for. Yuck!

  

• Since linking style sheets (see pages 129130) gives you the ability to indicate preferred and alternative style sheets (and Netscape 4 is no longer an issue), that's the method I prefer.

• You can limit imported style sheets to particular outputs, as described on the following page.

  Figure 8.16. All major modern browsers support importing styles.