CSS @import Rule

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

<!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>

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.




Related articles