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, the optional layer keyword or layer() function assigns the imported style sheet to a cascade layer, the optional supports() function conditionally imports the style sheet based on feature support, and the optional <media-query-list> (the import conditions) states the media conditions under which it applies.

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

Cascade Layers and Feature Support

The optional layer keyword or layer(<layer-name>) function assigns the imported style sheet to a cascade layer, either an anonymous one or a named one. This is useful for controlling how the imported styles interact with the cascade relative to your other style sheets, regardless of specificity or source order.

The optional supports() function lets you conditionally import a style sheet based on whether the browser supports a given CSS feature, using the same syntax as @supports.

The layer/layer() and supports() extensions were introduced after the original @import media-query-only syntax, so older browsers that don't support them will not import a style sheet whose @import rule uses them.

Official Specifications