CSS @import rule is used to import one style sheet into another style sheet. The @import rule must be written at the top of the style sheet(but after the @charset rule if any).
In the example below, the current style sheet imports the ‘colors.css’ style sheet into it.
Example:
@import 'colors.css'; /* The current style sheet imports the 'color.css' sheet. */
It is also possible to import style sheets conditionally. See the example below:
Example:
@import 'colors.css' screen; /* Imports 'colors.css' only if the media is 'screen' */
@import url('printer.css') print; /* Imports 'printer.css' only if the media is 'print' */
we can also add multiple conditional statements with the @import rule.
The current file imports the ‘responsive.css’ only if the media is ‘screen’ and the viewport size is less than or equal to ‘420px’.
Example:
@import url('responsive.css') screen and (max-width: 420px);
/* Imports 'responsive.css' only if media is screen and viewport is not more than '420px' */
Here are a few points which you have to keep in mind while using the @import rule:
- The @import rule must be placed before all rules except the @charset rule if any.
- The @import rule can not be used inside conditional group at-rules
- As the @import rule support media queries, so you can make the @import rule media dependent.
- If no media queries are specified, the @import rule remains unconditional and applies to all.
CSS Syntax
The @import rule has the following syntax:
@import string|url(source)|media-queries
Property Values
The @import rule accepts the following values:
| string | Specifies the location URL of the style sheet that is to be imported. |
| url(source) | The location of the style sheet to be imported is passed as the parameter of url(source). |
| media-queries | Defines the list of comma-separated media queries. A media query works as a conditional statement for the @import rule. |
