CSS PROPERTIES
Expand All|Collapse All
CSS AT-RULES

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:

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

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.

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.

Your Feedback:

We would love to hear from you, please drop us a line.