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

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 or an @import rule. For example, the second @import declaration is illegal and will be ignored by the 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 106d2t

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 3o1cx

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.

@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.

@import url;
/* or */
@import url list-of-media-queries;
                

@import "footer-styles.css";
@import "products.css";
@import "internet-explorer.css";
@import url(../styles/ads.css);
@import url(../../css/print/printable.css) print;
@import url(../styles.css) screen and (orientation: portrait);
                

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,900);
                

body {
    font-family: "Lato", sans-serif;
}