CSS @import rule

Definition and usage

The @import rule allows you to import a stylesheet into another stylesheet.

The @import rule must be located at the top of the document (but after any @charset declaration).

The @import rule supports media queries, so it can allow for dependent imports based on media.

Import the "navigation.css" stylesheet into the current stylesheet:

@import "navigation.css"; /* Use string */

@import url("navigation.css"); /* Use URL */

Import the "printstyle.css" stylesheet only when the media is print:

@import "printstyle.css" print;

Import the "mobstyle.css" stylesheet only when the media is screen and the viewport width is 768 pixels:

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

@import url|string list-of-mediaqueries;

Value	Description
url\|string	A URL or string representing the location of the resource to be imported. The URL can be absolute or relative.
list-of-mediaqueries	A comma-separated list of media queries that determines under what conditions the CSS rules introduced through the URL apply.

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome	IE / Edge	Firefox	Safari	Opera
1.0	5.5	1.0	1.0	3.5