@import
The @import CSS at-rule is used to import style rules from other valid stylesheets. An @import rule must be defined at the top of the stylesheet, before any other at-rule (except @charset and @layer) and style declarations, or it will be ignored.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| DOM API | ||||||
| The CSSImportRule interface represents an @import at-rule. | 1 | 12 | 1 | 1 | 18 | 1 |
| The read-only href property of the CSSImportRule interface returns the URL specified by the @import at-rule. | 1 | 12 | 1 | 1 | 18 | 1 |
| The read-only media property of the CSSImportRule interface returns a MediaList object representing the media query list of the @import rule. | 1 | 12 | 1 | 1 | 18 | 1 |
| The read-only styleSheet property of the CSSImportRule interface returns the CSS Stylesheet specified by the @import at-rule. This will be in the form of a CSSStyleSheet object. | 1 | 12 | 1 | 1 | 18 | 1 |
Syntax
@import url('reset.css');
@import url('theme.css') screen;
@import url('print.css') print;Live demo
Use cases
-
Using @import
The @import CSS at-rule is used to import style rules from other valid stylesheets.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.