What You’ll Learn

The @import at-rule lets you pull external stylesheets into a CSS file. Use it to organize styles across files, with optional media conditions for when those styles apply.

Introduction

The @import at-rule in CSS lets you include one or more external stylesheets inside another CSS file. It is useful for splitting styles into logical modules — such as a reset file, a theme file, and component styles — while keeping a single entry point.

Definition and Usage

@import is not a CSS property — it is an at-rule, like @media or @font-face. It fetches another stylesheet and merges its rules into the current one. Imported rules are applied in the order they appear, before the rules written directly in the file.

Every @import must appear at the top of the stylesheet, before any other rules. Only @charset (if present) may come before it.

📝 Syntax

The basic syntax imports a stylesheet by URL or path:

@import url("reset.css");

You can also use a plain string without url():

@import "theme.css";

Add a media type or media query to load styles only under certain conditions:

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

Full File Example

@import url("reset.css");
@import url("typography.css");

body {
  font-family: system-ui, sans-serif;
  color: #1e293b;
}

Syntax Options

Placement Rules

• @import must appear before all other CSS rules and declarations.
• Only @charset may precede @import in the same file.
• Rules written after imports override imported rules when selectors have equal specificity.
• Imported files can themselves contain @import (though nesting hurts performance).
• @import works in external .css files and embedded <style> blocks.

When to Use @import

Reach for @import in these situations:

• Modular CSS — Split reset, layout, and component styles into separate files with one main entry.
• Conditional stylesheets — Load print or mobile CSS only when a media condition matches.
• Third-party CSS — Pull in a library stylesheet from within your own CSS bundle.
• CSS-only environments — When you cannot edit HTML but can edit a single CSS file.
• Prototyping — Quickly combine multiple style files during early development.

Prefer <link> tags in HTML for critical styles on production sites, especially above-the-fold content where loading speed matters.

Examples Gallery

Practice @import with basic imports, multiple files, conditional media imports, and the <link> alternative.

@import url("reset.css");

body {
  font-family: system-ui, sans-serif;
  padding: 1.5rem;
  color: #1e293b;
}

@import url("reset.css");
@import url("typography.css");
@import url("components.css");

body {
  background: #f8fafc;
}

@import url("print.css") print;

body {
  font-family: system-ui, sans-serif;
  padding: 1.5rem;
  color: #334155;
}

<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="theme.css">

<!-- vs @import inside CSS:
  @import url("reset.css");
  @import url("theme.css");
-->

💬 Usage Tips

• Top of file — Always place @import before any other CSS rules.
• Prefer <link> — Use HTML links for critical styles on production pages.
• Order matters — List imports from general (reset) to specific (components).
• Relative paths — Use paths relative to the CSS file location: url("../css/theme.css").
• Media conditions — Append print or a media query to avoid loading unused CSS on screen.

⚠️ Common Pitfalls

• Import after rules — Browsers ignore @import not at the top of the file.
• Performance cost — Each import adds a sequential network request.
• Nested imports — Import chains (A imports B imports C) slow loading further.
• Confusing with @use — Sass/SCSS @use is a preprocessor feature, not native CSS @import.
• Missing files — A broken path silently fails; check the Network tab in DevTools.

♿ Accessibility

• Don’t delay critical CSS — Slow imports can postpone readable, styled content.
• Print styles — Use conditional imports so print layouts remain accessible on paper.
• Reduced motion — Consider separate files for prefers-reduced-motion overrides.
• Contrast in all imports — Every imported file must meet color contrast requirements.
• Focus styles — Ensure imported component CSS does not remove focus outlines.

💡 Best Practices