Expand All | Collapse All

CSS @import rule

Topic: CSS3 Properties ReferencePrev|Next


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.


The syntax of this at-rule is given with:

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

The example below shows the @import property in action.

@import url("css/layout.css");
@import url("css/color.css");
body {

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.

Browsers Icon

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.

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties