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
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:
@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)