I’ve been using CSS quite frequently over the last few years to design my web pages. In the process of using it, I have come across some very useful features that have made my design strategy and develop phases much more enjoyable. At the top of the list is the @import rule. This rule allows you to include external style sheets in your document. It is a way of creating a style sheet within your document, and then importing additional rules into the document.
To use the @import rule, type:
<style type="text/css">
@import url("import1.css");
@import url "import2.css";
</style>
The url() is not required. The double quotes are required for valid XHTML, but browsers that support url() tend to support it with or without quotes.
You can also include an @import rule in a style sheet with styles:
<style type="text/css">
@import url("import3.css");
p { color : #f00; }
</style>
@import rules must always be first in a document
Finally, you can also import a style sheet for just a specific media:
<style type="text/css">
@import url("import4.css") tv, print;
</style>
This acts the same as if you had defined the media type in the <style> tag.
Browser Support
Netscape 4.x and IE 3.x do not support the @import rule. Internet Explorer 6 and below do not support the media designation. IE 4.x has some support for the @import rule, but it’s spotty, and it’s best not to rely on it.