CSS @import Rule

The @import rule imports a stylesheet into the current stylesheet.

These rules must be at the top -- but after any @charset declaration.

Example

#

Two alternative @import rules.

@import "style.css";
or
@import url("style.css");

Using @import

To make the @import media-dependent you can add media queries.

'Media-dependent' means the import is limited to certain devices.

@import can also be used to include fonts from a CDN.

Syntax

@import url | string media-queries;

Values

#

Value Description
url|string URL or path representing the location of the import file.
media-queries A comma-separated list of media queries. This limits the import to certain devices only.

More Examples

These are some media-dependent examples.

Import printstyle.css only if the media is print:

@import "printstyle.css" print;

Import responsive.css only if the page is displayed on a screen and the viewport is at most 768 pixels wide:

@import "responsive.css" screen and (max-width: 768px);

Browser support

This table shows when @import support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
5.5 Jul 2002
Opera
3.5 Nov 1998
Safari
1.0 Jun 2003

You may also like

Guides