CSS @import Rule
Example
Import the "navigation.css" style sheet into the current style sheet:
@import
"navigation.css"; /* Using a string */
or
@import
url("navigation.css"); /* Using a url */
More examples below.
Definition and Usage
The @import rule allows you to import a style sheet into another style sheet.
The @import rule must be at the top of the document (but after any
@charset
declaration).
The @import rule also supports media queries, so you can allow the import to
be media-dependent.
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| @import | Yes | 5.5 | Yes | Yes | Yes |
CSS Syntax
@import url|string list-of-mediaqueries;
Property Values
| Value | Description |
|---|---|
| url|string | A url or a string representing the location of the resource to import. The url may be absolute or relative |
| list-of-mediaqueries | A comma-separated list of media queries conditioning the application of the CSS rules defined in the linked URL |
More Examples
Example
Import the "printstyle.css" style sheet ONLY if the media is print:
@import
"printstyle.css" print;
Example
Import the "mobstyle.css" style sheet ONLY if the media is screen and the viewport is maximum 768 pixels:
@import
"mobstyle.css" screen and (max-width: 768px);
