The @import directive is used to hide CSS files from older Web browsers (such as Netscape 4) that do not fully support CSS.

Best practice

If your Web pages use mostly different CSS rules, embedded CSS would probably be more appropriate. However, it is generally more likely that Web pages on the same Web site will use many of the same CSS rules. In this situation, there are benefits to using external CSS. For example, since all the CSS rules are stored in one place, when the look and feel of a Web site needs to be updated, it is only necessary to modify CSS rules in a single file.

Depending on how a Web browser is configured, it can cache external CSS. The advantage here is that the browser will have fewer files to download, which translates into speed, and, if the site is really popular, bandwidth savings.

When updating CSS files, make sure that the browser always downloads the latest version. To trick Web browsers into doing this, make the URL to the CSS file unique. One way to render it unique is to put a question mark followed by a number after the URL to the CSS file. Then, each time you update the CSS file, simply increment the number. For example:

<head>

<style type="text/css" media="screen">

@import url('screen.css?25');

</style>

</head>

Attributes

Basic

media

(MediaDescriptions) This attribute specifies the intended destination medium for style information. It may be a single media descriptor or a comma-separated list. The default value for this attribute is screen.