CSS @import Rule

The @import CSS rule is used to import style rules from other style sheets. These rules must be placed before all other types of rules, except for the @charset rule; since @import is not a nested statement, it cannot be used in conditional group rules.

　CSS @import rule usage syntax

The syntax of this rule is as follows:

@import url [media type,...];

The following example demonstrates how to use the @import attribute.

@import url("css/layout.css");
@import url("css/color.css");
body {
　color: blue;
　font-size:14px;
}

You can also specify @import rules related to media (i.e., the media types of the imported style sheets) — just specify a comma-separated list after the URL.Media typeormedia query can be used.

@import url("css/default.css");
@import url("css/print-style.css") print;
body {
　color: red;
　font-size:　1em;
}

Browser compatibility

The compatibility of the @import attribute of browsers, the numbers in the following table represent the minimum version number of browsers that support this attribute; all mainstream browsers support this rule.

Further reading

Please refer to the following tutorials:CSS Media Types.