Include One CSS File in Another with CSS @import

You will learn how CSS @import loads one stylesheet from another, where the rule must appear, how imported styles participate in the cascade, and when using separate <link> tags or a build tool is a better choice.

CSS supports stylesheet inclusion through the @import at-rule. It tells the browser to load another stylesheet and treat its rules as part of the current stylesheet.

@import url("reset.css");
@import url("components/buttons.css");

This is useful for splitting styles into focused files, such as a reset, typography rules, component styles, and page-specific styles.

However, @import can delay stylesheet loading: the browser must download and parse the current CSS file before discovering its imports. For production sites, developers often prefer to:

• include independent CSS files with <link> elements in HTML, or
• combine source CSS files into one optimized output file during a build step.

The imported rules still follow normal CSS cascade rules. Order matters: styles imported later can override equally specific styles imported earlier.

Think of a CSS file as a recipe booklet. @import is a note at the beginning that says, “Before using this booklet, also bring in the recipes from that other booklet.”

The order of the booklets matters. If two recipes give different instructions for the same dish, the later applicable instruction usually wins when their specificity is the same.

Use @import followed by a stylesheet URL. Place it before normal CSS rules in the file.

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

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

If styles.css is loaded by the page, the browser also loads reset.css and layout.css.

A media condition can be added when an imported stylesheet should apply only in certain situations:

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

In this example, print.css is used for print media.

Loading the main stylesheet

The HTML document still needs to load the top-level stylesheet:

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

The browser reads styles.css, encounters its @import rules, and then fetches the referenced CSS files.

Consider these files:

/* base.css */
p {
  color: navy;
}

/* theme.css */
p {
  color: tomato;
}

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

<link rel="stylesheet" href="styles.css">
<p>Hello</p>

Step by step:

1. The browser loads styles.css through the <link> element.
2. It finds and loads base.css. Paragraphs receive color: navy.
3. It then finds and loads theme.css. Paragraphs receive color: tomato.
4. Both declarations have the same selector specificity: p.
5. Because the declaration from theme.css comes later, it wins. The paragraph is tomato-colored.

If theme.css used a less specific selector or an earlier rule, the result could be different. CSS order is important, but specificity and !important can also affect which declaration wins.

Common reasons to divide CSS into files include:

• Shared foundation: A reset.css or base.css file establishes consistent default styles.
• Design tokens: A variables.css file defines custom properties such as colors, spacing, and font sizes.
• Component organization: Files such as buttons.css, cards.css, and forms.css keep component rules focused.
• Theme styles: A project can load a light or dark theme stylesheet.
• Print styling: A print-specific stylesheet can adjust layouts for paper output.
• Small static sites: For a simple site without a build process, @import can make source files easier to manage.

For example, a small documentation site might use one main file that imports typography, navigation, and code-block styles.

In modern codebases, source CSS is often split into many files for maintainability, but the final browser-delivered CSS is usually optimized.

Common pattern: build one output file

A project may have this structure:

src/styles/
  base.css
  tokens.css
  components.css
  app.css

app.css can be the entry file:

@import url("./tokens.css");
@import url("./base.css");
@import url("./components.css");

A CSS-aware build tool can process these files and produce a single app.css for deployment. This preserves modular authoring without making the browser discover a chain of imports at runtime.

Common pattern: separate HTML links

When files are genuinely independent, developers may load them directly:

<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="app.css">

This makes both resources visible to the browser immediately. Keep their order intentional because later files can override earlier rules.

Configuration and themes

CSS custom properties are often defined in a base stylesheet and consumed by component styles:

:root {
  --brand-color: #2563eb;
}

.button {
  background: var(--brand-color);
}

This is frequently more maintainable than duplicating theme values across multiple files.

Putting @import after normal rules

@import must come before regular style rules, except @charset and @layer statements may precede it.

/* Incorrect: the import comes after a style rule */
body {
  margin: 0;
}

@import url("reset.css");

Write it this way instead:

@import url("reset.css");

body {
  margin: 0;
}

Using the wrong relative path

The path is resolved relative to the CSS file containing the import, not relative to the HTML page.

/* If this file is css/app.css, this looks for css/components/card.css */
@import url("components/card.css");

If the component file is at css/components/card.css, that path is correct. Check the directory structure carefully.

Creating circular imports

Avoid a chain such as a.css importing b.css while b.css imports a.css. It makes dependencies hard to reason about and can cause styles not to be applied as expected.

Relying on many runtime imports for a production site

Many nested imports can slow style discovery. Prefer a build-generated bundle or deliberate top-level <link> elements when performance matters.

Assuming import order always decides

Order only breaks ties when competing declarations have comparable importance, origin, and specificity. A more specific selector can still win:

/* Earlier but more specific */
main p {
  color: navy;
}

/* Later but less specific */
p {
  color: tomato;
}

The paragraph inside main remains navy because main p is more specific.

@import in CSS is different from JavaScript import. CSS @import loads stylesheets, while JavaScript imports code modules.

Also note that Sass historically had an @import directive. Modern Sass recommends @use and @forward instead. That is a Sass feature, not the same mechanism as the browser-native CSS @import.

/* Import another stylesheet */
@import url("file.css");

/* Equivalent quoted form */
@import "file.css";

/* Import with a media condition */
@import url("print.css") print;

• Put @import at the top of the stylesheet.
• Use paths relative to the current CSS file.
• Imported rules join the normal CSS cascade.
• Later imports can override earlier imports when specificity is equal.
• Avoid circular imports.
• For production performance, prefer a build-generated stylesheet or deliberate <link> tags when appropriate.

<!-- Load the top-level CSS file -->
<link rel="stylesheet" href="css/app.css">

Can a CSS file import another CSS file?

Yes. Use the browser-native @import at-rule, such as @import url("theme.css");.

Where should @import go in a CSS file?

Place it before ordinary CSS rules. @charset and certain @layer declarations can appear before it.

Is @import slower than a <link> tag?

It can be. The browser generally discovers an @import only after it has fetched and processed the containing stylesheet. Separate top-level links can be discovered directly from HTML.

Does CSS import order matter?

Yes. When declarations otherwise tie in importance and specificity, the later applicable declaration wins.

Can I use a relative path in CSS @import?

Yes. The relative path starts from the folder containing the CSS file with the @import rule.

Can I import a CSS file only for printing?

Yes. Add a media condition:

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

Should I use @import in every project?

It is valid CSS, but many production projects use a build tool to combine modular files or use top-level <link> tags to avoid delayed loading.

Is CSS @import the same as Sass @import?

No. Browser CSS @import loads a stylesheet at runtime. Sass processes its directives during compilation, and modern Sass favors @use and @forward.

• CSS cascade — Determines which competing style declaration applies.
• CSS specificity — Explains why a more targeted selector may beat a later rule.
• HTML <link> element — The standard way to load a top-level external stylesheet from a document.
• CSS media queries — Lets styles apply only under conditions such as print or screen size.
• CSS custom properties — Useful for sharing design values across modular stylesheets.
• CSS resets and normalization — Common foundational styles that may be loaded before application styles.
• Sass modules (@use and @forward) — A build-time approach to organizing Sass source files.
• Asset bundling — Combines and optimizes source assets for deployment.