The @import at-rule includes another stylesheet into the current CSS file. Use it to split styles into smaller files, then pull them together from one place.
Put every @import at the top — after optional @charset, and before other style rules. You can add a media condition so the import applies only on matching devices.
<link> for performance.HTML <link rel="stylesheet"> can fetch sheets in parallel. @import often loads more sequentially and may delay first paint. Use @import when you need CSS-side composition or media-gated imports.
Core @import is a long-standing CSS feature. Newer extras like layer() and supports() need newer browsers — keep beginner examples to URL + optional media.
@import <url> | <string> [ <media-query-list> ]?;
/* common forms */
@import url("theme.css");
@import "theme.css";
@import url("print.css") print;A URL (or quoted string) is required. Media queries are optional. End with a semicolon.
| Form | Description | Try it |
|---|---|---|
url("...") | Import a stylesheet by URL | Try it |
"..." string | Same idea with a quoted path | Try it |
| multiple imports | List several @import lines at the top | Try it |
| with media | Apply the import only when media matches | Try it |
| wrong placement | After a style rule, the import is ignored | Try it |
| cascade order | Local rules after imports can override | Try it |
@importKeep imports first, then write your own rules.
@charset "UTF-8";.@import lines with a URL or quoted path.<link> when you can.| Piece | Required? | Role |
|---|---|---|
| URL or string | Yes | Path to the stylesheet to include |
| Top-of-file placement | Yes | After @charset, before style rules |
| Media query list | No | Limits when the import applies |
<link> alternative | Often better | Faster parallel loading from HTML |
@import does not draw a box by itself — placement decides whether it runs. Compare valid and invalid file orders below.
Each snippet focuses on @import. Try-it demos use tiny data: stylesheets so they run without extra files.
Import another sheet, then write local rules below it.
@import url("base.css");
body {
color: #0f172a;
}@import url("base.css"); must sit at the top.base.css into this file’s cascade.Limit an import to a media type or query.
@import url("print.css") print;
body {
font-family: Georgia, serif;
}print (or a full query) gates the import.screen and (max-width: 600px).@charset (optional), then imports, then rules.
@charset "UTF-8";
@import url("reset.css");
@import url("theme.css");
h1 {
color: #5b21b6;
}@charset may precede imports.@import stays above normal rules.@import after a rule is ignored.Most import bugs are placement, path, or performance issues.
If any normal rule appears first, later @import lines are ignored.
Nested or chained imports often load less efficiently than multiple HTML <link> tags.
Paths are relative to the importing stylesheet, not the HTML page.
A imports B and B imports A creates confusion and wasted work. Keep a clear one-way graph.
layer() and supports()Modern forms can assign cascade layers or feature checks. Learn core URL + media first, then add these when needed.
@import is a browser CSS feature for including stylesheets. Node.js, Deno, and Bun do not apply it as a layout API.
Chrome 1+, Firefox 1+, Safari 1+, Edge 12+, Opera 3.5+, Internet Explorer 5.5+, Samsung Internet 1+.
Bottom line: Safe everywhere for basic URL imports and media lists. Prefer <link> for critical production CSS when possible. Not a server runtime API.
@charset, before other style rules.<link> for critical CSS when performance matters.One line: @import url("file.css"); at the top pulls that sheet into your cascade.
Learn how to define named animation sequences in CSS.
5 people found this page helpful