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
@charset and @layer
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 at-rule.
| At-rule | |||||
|---|---|---|---|---|---|
| @import | 1 | 5.5 | 1 | 1 | 3.5 |
| layer | 99 | 99 | 97 | 15.4 | 85 |
| supports() | 122 | 122 | 115 | No | 108 |
CSS Syntax
@import url|string list-of-mediaqueries;
Property Values
| Value | Description |
|---|---|
| url|string | A url or a string that represents 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 |
| layer-name | |
| supports-condition |
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);
