CSS import
Cascading style sheets, or CSS, has an import rule that allows you to import a css file into a HTML document or another external CSS stylesheet. It’s used as a method of referencing external CSS stylesheets or other files that may be needed on a HTML document or even an external CSS stylesheet.
The CSS import rule looks like this:
@import
Some older internet browsers do not support the @import rule. In these cases, the early browsers tend to ignore the rule and any CSS style rules contained in the imported file. @import is used more or less as a hack to show one external stylesheet to older browsers, and a different stylesheet to the newer browsers.
Of course, if separate external stylesheets are not required, the @import rule does not need to be used.
There are two ways of referencing files.
The first method is by using the <link> tag between the <head> tags:
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
The second method is by using the @import rule:
<style type="text/css"> @import url('style.css'); </style>
To get an older browser to use the external stylesheet, ’styles_for_old_browsers.css’, and newer browsers to use a different external stylesheet, ’styles_for_new_browsers.css’, you would use this code:
<link rel="stylesheet" type="text/css" href="styles_for_old_browsers.css" />
<style type="text/css"> @import url('styles_for_new_browsers.css'); </style>
How to use @import
The @import rule must be stated before any other CSS style rules. This has to be done regardless of whether the @import rule is used in a HTML document or an external css stylesheet.
To use @import in a HTML document, the @import rule must be within <style> tags in the <head> area of the HTML document:
<head>
<style type="text/css"> @import url('styles_for_new_browsers.css'); </style>
</head>
To import an external stylesheet from your own web site, you would use:
@import url('some_css_page.css');
To import an external stylesheet from another web site, you would use:
@import url('http://www.example.com/some_css_page.css');
More information
