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.