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 stylesheet, before any other rules except @charset and @layer.
INFO
The @import at-rule cannot be used inside conditional group at-rules.
| Initial Value | - |
|---|---|
| Applies to | - |
| Inherited | No. |
| Animatable | No. |
| Version | CSS2 |
| DOM Syntax | N/A |
Syntax
Syntax of CSS @import Rule
@import <url> | <string> [ <media-query-list> ]? ;Example of the @import rule:
Example of CSS @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 at-rule 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>Result
The Difference Between Relative URL and Absolute URL
The <url> and <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.
CSS @import Rule
@import "relative.css";In the next example the URL is still relative, though we have provided some path information:
CSS @import Rule
@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.
CSS @import Rule
@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.
CSS @import Rule
@import "media-query.css" print;Values
| Value | Description |
|---|---|
| url | A <url> or <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. |
Practice
What is the correct syntax to use the @import rule in CSS?