The @import rule imports a stylesheet into the current stylesheet.
These rules must be at the top -- but after any @charset declaration.
Two alternative @import rules.
@import "style.css";
@import url("style.css");
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.
@import url | string media-queries;
| 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. |
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);
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 |
