namespace
@import
Pulls another stylesheet into the current one at parse time, optionally scoped to a cascade layer, supports condition, or media query. It must appear at the top of a stylesheet, before all other rules except @charset and @layer statements.
@import url(<file>) [layer(<name>)] [supports(<condition>)] [<media-query>];Common conditions / descriptors
| Descriptor | Purpose |
|---|---|
| url(<path>) | The stylesheet to fetch and inline |
| layer(<name>) | Import the file's rules directly into a named cascade layer |
| supports(<cond>) | Only import when the feature query passes |
| <media-query> | Trailing media query that scopes the imported rules |
| layer | Import into an anonymous layer |
Examples
@charset 'utf-8';
@import url('reset.css');
@import url('typography.css');Imports must precede other rules (charset is allowed before)
@import url('print.css') print;Import only for the print medium
@import url('framework.css') layer(vendor);Drop a third-party stylesheet into a 'vendor' layer
@import url('grid.css') supports(display: grid) screen and (min-width: 768px);Combine supports() and media query on a single import
Gotcha
Each @import is a render-blocking request that cannot start until the parent stylesheet is parsed — prefer bundling or in production. Any @import placed after a normal rule is silently ignored.
Related at-rules
@layer
Declares one or more cascade layers so authors can control the order in which rule groups cascade, independent of specificity. Layers declared later win over layers declared earlier, and unlayered styles win over all named layers.
@charset
Declares the character encoding of the stylesheet so the parser can decode non-ASCII bytes correctly. It must be the very first thing in the file, byte for byte, and only utf-8 is meaningful in practice.
@media
Applies contained CSS rules only when the specified media query matches the user's device, viewport, or environment. It is the foundation of responsive design and print-specific styling.
@property
Registers a typed CSS custom property so the engine knows its syntax, whether it inherits, and its initial value. This unlocks animation and transition of custom properties and rejects invalid values instead of falling back to the string type.