Share this Page URL

Chapter 9. Applying Styles > Importing External Style Sheets - Pg. 152

Chapter 9 Importing External Style Sheets Early on, importing style sheets was simply an alternative to linking to them. Now, it's used as a way to save buggy browsers-- Netscape 4 in particular--from themselves. To import an external style sheet: Within the style element (see page 151), 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 148). Tips Figure 9.14 Some browsers not only don't support par- ticular CSS features but create something hideous instead. Such is the case of Netscape 4.x and borders. Look how it creates those charming little boxes instead of the borders we asked for (see Figure 9.5 on page 149). Yuck! Importing External Style Sheets Netscape 4 doesn't support the @import rule. However, because its support of CSS in general is pretty abysmal, many Web page coders use this limitation to their advantage. For example, you could link to style sheets with rules that Netscape 4 deals with properly and then import style sheets with advanced techniques it can't handle. Netscape 4 will then have at least some of the style information while browsers who support @import will have it all. For more on hiding CSS from buggy browsers, see Johannes Koch's helpful hide_css_from_browsers/ 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). <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>La Casa Mil&agrave;</title> <style> @import "not_for_Netscape4.css"; </style> </head> Figure 9.15 The @import rule must be placed before any individual style rules in the style element. (It may come after other @import rules.) Figure 9.16 Since Netscape 4.x doesn't understand the @import rule, it won't import the style rules in not_for_Netscape4.css, and won't display the border incorrectly--or at all for that matter. (It can still link to external style sheets with rules that it does understand.) Other browsers that do support @import , including IE5+, Netscape 6+, and Opera 3+ will continue to dis- play the border correctly. 152