References

Beginner-friendly references for web development, with live, editable examples.

The CSS @import at-rule

At-rule CSS All modern browsers Updated
Quick answer

The CSS @import at-rule pulls another stylesheet into the current one, e.g. @import url("typography.css");. It must appear before any other rules. Use it with care for performance: an imported sheet is only discovered after the sheet importing it has downloaded and parsed, and nested imports chain one after another, so a <link> in the HTML is usually faster. It can also carry a media query or cascade layer.

Overview

@import lets one stylesheet load another. It is the CSS way to split your styles across files and stitch them back together, and it has to sit at the very top of the file: before any selectors, after only an optional @charset and any @layer statement list.

The catch is performance. An imported sheet is only discovered once the importing sheet has downloaded and parsed, so every level of importing adds a round-trip before the browser even knows the file exists. Imports written side by side in one sheet are fetched together, but nested imports chain one after another. For that reason, multiple <link> tags in the HTML, or bundling your CSS at build time, almost always loads faster.

Where @import still earns its place is its modifiers. It can take a media query, so @import url("print.css") print applies only when printing, and it can import directly into a cascade layer with @import url("framework.css") layer(framework), which is a tidy way to slot third-party CSS into your @layer order.

Syntax

/* must come first, before other rules */
@import url("base.css");
@import url("print.css") print;
@import url("framework.css") layer(framework);

Best practices

  • Prefer multiple <link> tags or a build-time bundle over @import for performance; imports download sequentially.
  • If you do use it, keep every @import at the very top of the file or it will be ignored.
  • Scope an import with a media query, e.g. @import url("print.css") print, to load it only when needed.
  • Import third-party CSS into a cascade layer with layer(name) to control where it sits in your @layer order.

Frequently asked questions

What does @import do in CSS?
It loads another stylesheet into the current one, e.g. @import url("base.css"). It must appear before any other rules.
Is @import or link faster?
A <link> is usually faster. An imported sheet is only discovered once the importing sheet has parsed, and nested imports chain one after another, while a <link> is found in the HTML up front.
Why is my @import being ignored?
It is probably not at the top of the file. @import must come before all other rules; only @charset, @layer statements and other imports may precede it.
Can @import use a media query?
Yes, e.g. @import url("print.css") print; loads the sheet only for print. It can also import into a cascade layer with layer().
@font-face @keyframes