CSS: @import

By Xah Lee. Date: . Last updated: .

What is @import

CSS @import lets you import style rules from other stylesheets into the current one.

it basically work as if the file are included at the import location.

Basic syntax

/* import from local file. using relative path */
@import url("path/to/stylesheet.css");

/* or short syntax */

@import "path/to/stylesheet.css";
/* import from an absolute url */
@import url("https://example.com/theme.css");

/* 
CORS must allow it:
Browsers enforce the Same-Origin Policy.
For cross-origin stylesheets, the remote server must send the right CORS headers (most commonly Access-Control-Allow-Origin) so the browser will actually apply the CSS.
If the headers are missing or don't match, the browser blocks the stylesheet and you get a CORS error in the console.
 */

@import must be at top

All import rules must come before any regular CSS rules. Else it is ignored.

The only other statements (not css rules) that can come before import are:

@charset "utf-8";
@layer x1, x2, x3;
@import url("some.css") layer(x2);

body {
 font-family: Arial, sans-serif;
}

🛑 WARNING: import may cause sequential loading of files. The browser stops parsing current CSS file until it finishes loading the imported CSS. This is especially bad if the imported CSS also contains import.

It is best to avoid using import. Use html link instead.

<link rel="stylesheet" href="../mystyle.css" />

Media query with @import

/* import only on smaller screen */
@import url("mobile.css") screen and (width <= 600px);

/* import print styles */
@import url("print.css") print;

/* multiple conditions */
@import url("high-res.css") screen and (min-resolution: 2dppx);

Import into a cascade layer

you can import into a cascade layer.

@import url("framework.css") layer(framework);
@import url("theme.css") layer(theme);

@layer theme {
  /* your overrides here */
}

browser support

supported by all major browsers since 2016.

CSS. misc