Web.QHMIT.com

CSS @import At-Rule

The CSS @import at-rule can be used to import a style sheet from another location.

Using the @import at-rule allows you to break your style sheet up into smaller parts. This can be beneficial if you have a large style sheet. For example, you could import a style sheet for the navigation, another for typography, another for widgets, etc.

The @import at-rule must be at the top of the document (but it can't come before any @charset declaration).

Here's an example of an @import rule:

In this particular case I specify the style sheet by using a <string>. This is equivalent to using the url() function. So the following two lines are equivalent:

When a style sheet is imported into another style sheet, it is treated as though its contents were written in place of the @import rule. Therefore, its declarations interact with the cascade as if they were written literally into the stylesheet at the point of the @import.

Relative URL vs Absolute URL

The @import rule accepts a <url> or <string> to determine the file to import. You can provide this as a relative URL or an absolute URL.

The above examples use a relative URL. This means that its relative to the current style sheet's location. So we know that the following example imports a style sheet from the same folder as the current style sheet because we don't provide a path — we only provide the file name.

The following example includes path information, however, it's still relative to the current file:

The following example includes path information, however, it's relative to the website's root:

The following example is an absolute URL. It includes the full path, including the domain name:

Media Queries

The @import rule supports media queries, so you can allow the import to be media-dependent.

In the following example, the style sheet will only be imported if the media is print (i.e. the document is printed out, or the user is print-previewing it).

Here are some more examples, to give you an idea of how media queries are written with the @import rule.

Official Syntax

The official syntax of the @import rule is as follows:

Where the <url> or <string> gives the URL of the style sheet to be imported, and the optional <media-query-list> (the import conditions) states the conditions under which it applies.

If a <string> is provided, it is interpreted as a <url> with the same value.

Official Specifications