CSS @import At-Rule

CSS @import At-Rule

The @import at-rule loads an external CSS stylesheet into another stylesheet. It allows styles to be organized across multiple files and supports conditional imports using media queries, feature support conditions, and cascade layers.

@import Syntax

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

Both forms import an external stylesheet. The file location can be written as a quoted string or inside the url() function.

Additional conditions can follow the stylesheet URL.

@import "print.css" print;
@import "layout.css" supports(display: grid);
@import "components.css" layer(components);
@import "mobile.css" screen and (max-width: 600px);

Each @import statement ends with a semicolon. It does not contain a declaration block.

The URL may be relative to the importing stylesheet or an absolute URL.

How @import Works

When the browser processes an @import rule, it locates the referenced stylesheet and includes its CSS rules in the importing stylesheet.

For example, a main stylesheet can import separate files for typography and layout.

main.css

@import "typography.css";
@import "layout.css";
body {
  background-color: #f5f5f5;
}

typography.css

h1 {
  color: #0056b3;
}
p {
  line-height: 1.6;
}

layout.css

.container {
  max-width: 1100px;
  margin: 0 auto;
}

The browser applies the imported styles along with the rules in main.css. Imported declarations participate in the normal CSS cascade.

Each imported stylesheet must be available at the specified URL. A missing file or failed request prevents its styles from being applied.

Import Order and Placement

The @import at-rule must appear near the beginning of a stylesheet, before ordinary style rules and most other at-rules.

An @charset declaration and certain statement forms of @layer may appear before imports.

Correct Placement

@layer reset, components, utilities;
@import "reset.css" layer(reset);
@import "components.css" layer(components);
body {
  font-family: Arial, sans-serif;
}

The layer order is declared first, followed by the imported stylesheets and then the ordinary CSS rules.

Incorrect Placement

body {
  font-family: Arial, sans-serif;
}
@import "components.css";

The import is ignored because it appears after an ordinary CSS style rule.

Multiple imports are processed in their declared order. When selectors have equal specificity and declarations have the same cascade priority, later declarations can override earlier ones.

The @import at-rule cannot be nested inside conditional group rules such as @media. Instead, add the condition directly to the import statement.

Importing with Media Queries

Media queries allow a stylesheet to be imported only when specified media conditions are satisfied.

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

The first import applies styles when printing. The second applies to screens, and the third applies to screens with a viewport width of 600px or less.

Multiple media conditions can be separated by commas.

@import "shared.css" screen, print;

This imports the stylesheet for both screen and print media.

If no media condition is provided, the imported stylesheet is not restricted to a particular media type.

Importing Based on Feature Support

The supports() condition allows an external stylesheet to be imported only when the browser supports a specified CSS feature.

@import "grid-layout.css" supports(display: grid);

This import applies only when the browser supports display: grid.

Feature support conditions can be combined with media queries.

@import "responsive-grid.css" supports(display: grid) screen and (min-width: 768px);

The stylesheet applies only when CSS Grid is supported and the screen is at least 768px wide.

The supports() condition uses syntax related to the CSS @supports at-rule, but it is written directly inside the import statement.

Browsers that do not support the requested feature do not apply the imported stylesheet.

Importing into Cascade Layers

The layer keyword and layer() function allow imported stylesheets to be placed into CSS cascade layers.

Named Cascade Layer

@import "components.css" layer(components);

This imports the stylesheet into a layer named components. If the layer does not already exist, it is created.

Anonymous Cascade Layer

@import "third-party.css" layer;

Using layer without a name places the imported stylesheet into a new anonymous cascade layer.

Controlling Layer Order

@layer reset, framework, components;
@import "reset.css" layer(reset);
@import "framework.css" layer(framework);
@import "components.css" layer(components);

For normal declarations, later layers in the declared order have higher priority than earlier layers, regardless of selector specificity across those layers.

Rules outside cascade layers generally take precedence over normal declarations inside layers. Important declarations follow a different layer priority order.

Combining @import with cascade layers can help organize third-party styles and control how they interact with a site's own CSS.

Using @import vs. HTML <link>

External stylesheets can be loaded using either CSS @import or the HTML <link> element.

Using @import

@import "styles.css";

This statement is placed inside a CSS stylesheet or an HTML <style> element.

Using <link>

<link rel="stylesheet" href="styles.css">

The <link> element is placed in the HTML document's <head> section.

For primary website stylesheets, the HTML <link> element is generally preferred because it allows the browser to discover the stylesheets earlier.

The @import at-rule remains useful for organizing CSS dependencies, conditional loading, and cascade layers.

@import Example

The following example imports a shared stylesheet and a separate print stylesheet.

HTML Document

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Import Example</title>
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <h1>CSS Import Example</h1>
  <p>This page uses styles from imported CSS files.</p>
</body>
</html>

css/main.css

@import "typography.css";
@import "print.css" print;
body {
  margin: 20px;
  background-color: #f5f5f5;
}

css/typography.css

h1 {
  color: #0056b3;
}
p {
  font-size: 18px;
  line-height: 1.6;
}

css/print.css

body {
  background-color: #fff;
}
h1 {
  color: #000;
}

When viewed on a screen, the heading is blue and the page has a light gray background. When printed, the print stylesheet changes the heading to black and the background to white.

The three CSS files must be saved in the same css directory for the relative imports to work as shown.

Browser Support

The basic @import at-rule is widely available across modern browsers. Newer features such as layer() and supports() have separate compatibility requirements. See Can I Use? for compatibility information.

Specifications

The @import at-rule is defined in CSS Cascading and Inheritance Module Level 5. The specification describes how imported stylesheets participate in the cascade, including conditional imports and cascade layers.

CSS Cascading and Inheritance Module Level 5