@import

The @import CSS at-rule allows you to import styles from one style sheet into another.

Importing style sheets allows for more modularity since you can combine several (partial) style sheets to reduce redundancy. Splitting a style sheet into smaller partial style sheets is useful because it also allows you to use the “partials” in different projects—all you’d have to do is import them into your main style sheets.

The @import keyword must be followed by the URI of the style sheet to include. A string is also allowed; it will be interpreted as if it had url(...) around it. Where relative URIs are used, they’re interpreted as being relative to the importing style sheet.

@import 'style-sheet-name.css';
@import url(../relative/path/to/styles.css);
@import url(http://absolute-path.com/css/some-styles.css);
                

In CSS2.1, any @import rules must precede all other rules (except the @charset rule, if present). User agents will ignore any @import rule that occurs inside a block or after any non-ignored statement other than an @charset or an @import rule. For example, the second @import declaration is illegal and will be ignored by the user agent:

@import "subs.css";
h1 { color: blue }
@import "list.css";

/* will be reduced to: */
@import "subs.css";
h1 { color: blue }
                

Also, in the following example, the second @import rule is invalid, since it occurs inside a @media block.

@import "subs.css";
@media print {
  @import "print-main.css";
  body { font-size: 10pt }
}
h1 {color: blue }
                

Specifying Media That Imported Style Sheets Apply To

In the previous example, the @import rule was included inside a @media block in an attempt to apply the imported styles to print media only. However, as you’ve seen, that is illegal. In order to achieve the effect of only importing a style sheet for ‘print’ media, you can use the @import rule with media syntax:

@import "subs.css";
@import "print-main.css" print;
@media print {
  body { font-size: 10pt }
}
h1 {color: blue }
                

Using the media syntax means that you can specify one or more comma-separated media queries that specify the media to which the style sheet is applicable. A media query can be as simple as a media keyword, or a combination of keywords separated by commas, or a combination of keywords and conditions combined using an operator.

@import url(path/to/style-sheet.css) print;
@import url(path/to/style-sheet.css) screen, projection;
@import url('landscape.css') screen and (orientation:landscape);
                

Style Sheet Cascading

The imported style sheets also cascade with each other, in the order they are imported, according to the cascading rules defined in CSS: any rules specified in the style sheet itself override rules in imported style sheets. That is, imported style sheets are lower in the cascading order than rules in the style sheet itself. Imported style sheets can themselves import and override other style sheets, recursively.

Trivia & Notes

@import has a negative impact on web page performance. You can read more about this and decide on when and whether or not to use it, in this article by Steve Souders.