CSS @import Rule

❮ Prev Next ❯

The CSS @import at-rule is used to import style rules from other style sheets and to support media queries. The @import keyword must be followed by the URI of the style sheet to include. A string is also allowed. It must be at the top of the document but after the @charset rule.

The @import property cannot be used inside conditional group at-rules.

Initial Value	-
Applies to	-
Inherited	No.
Animatable	No.
Version	CSS2
DOM Syntax	object.style.@import = "url";

Syntax

@import: url | string list-of-mediaqueries | initial | inherit;

Example of the @import rule:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
    <style>
      @import url('https://fonts.googleapis.com/css?family=Coiny');
      @import url('https://fonts.googleapis.com/css?family=Lobster');
      .p1 {
        font-family: 'Coiny', cursive;
      }
      .p2 {
        font-family: 'Lobster', cursive;
      }
    </style>
  </head>
  <body>
    <h2>@import property example</h2>
    <p class="p1">The @import rule allows you to import a style sheet into another style sheet.</p>
    <p class="p2">The @import rule also supports media queries, so you can allow the import to be media-dependent.</p>
  </body>
</html>

Try it Yourself »

Result

The Difference Between Relative URL and Absolute URL

A <url> or a <string> data types are accepted by the @import rule for determining the file that should be imported. This can be provided as an absolute or a relative URL.

The code example below uses a relative URL. This means that the URL is relative to the location of the current style sheet. Here we don’t need to provide a path. Instead, we only provide the name of the file.

@import "relative.css";

In the next example the URL is still relative, though we have provided some path information:

@import "../css/relative.css";

As you can see the following code example includes the full path with the domain name. This means that the URL is absolute.

@import "http://www.examples.fr/css/absolute.css";

Media queries

Media queries are supported by the @import rule. This means that the import can be media-dependent. In the code example below you can import the style sheet only when the media is print.

@import "mediaquerry.css" print;

Values

Value	Description
url	A <url> or a <string> showing the location of the resource to import. Url can be relative or absolute.
string list-of-mediaqueries	A comma-separated list of media queries conditioning the application of the CSS rules defined in the linked URL.
initial	Makes the property use its default value.
inherit	Inherits the property from its parents element.