CSS @import rule

Topic: CSS3 Properties ReferencePrev|Next

Description

The @import rule allows to import style rules from other style sheets. The @import keyword must be followed by the URL of the style sheet to include, and a semicolon. A string is also allowed in place of the URL; it will be interpreted as if it had url(...) around it.

Syntax

The syntax of this at-rule is given with:

The example below shows the @import property in action.

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

You can also specify media-dependent @import rules (i.e. media types to which the imported style sheet applies) — Simply specify the comma-separated media types or, media queries after the URL.

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

Browser Compatibility

The @import rule is supported in all major modern browsers.

Basic Support— Firefox 1+ Google Chrome 2+ Internet Explorer 5.5+ Apple Safari 1.3+ Opera 6+

Further Reading

See tutorial on: CSS Media Types.