@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.
@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:
@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
The current file imports the ‘responsive.css’ only if the media is ‘screen’ and the viewport size is less than or equal to ‘420px’.
@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
- 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.
@import rule has the following syntax:
@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.|