CSS @import Rule


The @import rule is used to import one style sheet into another style sheet. This rule also support media queries so that the user can import the media-dependent style sheet. The @import rule must be declared at the top of the document after any @charset declaration.

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.

Property Values:
  • url|string: A url or a string represents the location of the resource to be imported. The url may be relative or absolute
  • list-of-mediaqueries: The list of media queries condition the application of the CSS rules defined in the linked URL

CSS Syntax

@import url|string list-of-mediaqueries;

Example

Import the "navigation.css" style sheet into the current style sheet:

@import "navigation.css"; /* Using a string */

or

@import url("navigation.css"); /* Using a url */

Supported Browsers:

  • Firefox: 52.0, 2.0 -moz-
  • Google Chrome: 50.0, 4.0 -webkit-
  • Internet Explorer: 10.0
  • Safari: 9.0, 3.1 -webkit-
  • Opera: 37.0, 15.0 -webkit-, 11.1