CSS @import At-Rule
@import at-rule can be used to import a style sheet from another location.
@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.
@import at-rule must be at the top of the document (but it can't come before any
Here's an example of an
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
Relative URL vs Absolute URL
@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:
@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
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.
@importat-rule is defined in CSS Cascading and Inheritance Level 3 (W3C Candidate Recommendation, 19 May 2016).
- Further information about media queries can be found in the CSS Media Queries module (W3C Recommendation 19 June 2012).
@importrule was defined in CSS2 (Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification — W3C Recommendation 07 June 2011), where it introduced the ability to provide a <string> to denote the URL of the style sheet, as well as the requirement to place the rule at the beginning of the style sheet.
@importrule was initially defined in CSS1 (Cascading Style Sheets, level 1 — W3C Recommendation 17 Dec 1996, revised 11 Apr 2008)