CSS import Rule
Example
Import the "navigation.css" styles into the current stylesheet:
@import "navigation.css"; /* Using a string */
or
@import url("navigation.css"); /* Using a URL */
Browser Support
The numbers in the table indicate the first browser version that supports the property.
| Property | |||||
|---|---|---|---|---|---|
| @import | 1.0 | 5.5 | 1.0 | 1.0 | 3.5 |
Property Definition and Usage
CSS @import is used to import style rules from other style sheets.
The @import rule must be at the top of the CSS document, but can be after the @charset rule.
The @import rule is not a nested statement; it cannot be used within conditional group rules.
The @import rule also supports media queries, allowing you to import different style files based on different screen sizes.
CSS Syntax
@import url|string list-of-mediaqueries;
Property Values
| Value | Description | |
|---|---|---|
| url | string | Represents the address of the resource to be imported. This URL can be an absolute or relative path. Note that the URL does not need to specify a file; it can just specify a package name, and the appropriate file will be automatically selected (e.g., chrome://communicator/skin/). |
| list-of-mediaqueries | A comma-separated list of media query conditions that set under which conditions the CSS rules from the URL are applied. If the browser does not support any of the media query conditions in the list, it will not import the CSS file specified by the URL. |
Example
More style import examples:
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);