CSS @import Rule

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: