@import CSS At-Rule

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The @import at-rule instructs the style system to pull in rules from another stylesheet and make them part of the current stylesheet. When the stylesheet containing the @import is parsed, the referenced resource is fetched and its rules are processed and applied in the context of the importing sheet. Conceptually the imported rules are treated as if they appeared at the point of import, so they become part of the same cascade and participate in the same specificity and inheritance rules as other rules in the document.

Because imported sheets are integrated into the importing stylesheet, the placement and ordering of @import statements matters: the relative order of imports and in-sheet rules determines which declarations override others when selectors have comparable specificity. An imported stylesheet inherits the same origin and cascade context as the stylesheet that imported it, so author-level imported rules behave like other author rules in terms of precedence. This behavior makes @import useful for composing styles from multiple sources while preserving predictable cascade semantics.

Authors commonly use @import to modularize styles: splitting a large stylesheet into logical components, sharing common base rules, or conditionally bringing in sets of rules. That said, because it causes additional resource fetches and can affect the order in which styles are processed, it has implications for performance and render timing. In many workflows, bundling or using link-based loading strategies is chosen instead to reduce request overhead and control loading behavior more explicitly.

Finally, think of @import as a mechanism for composition and conditional inclusion rather than as a way to alter cascade mechanics: it does not change selector specificity, but it does influence which declarations are seen first or later in the cascade. Its predictable insertion semantics make it useful for organizing and reusing styles, but also mean you should be deliberate about import order and mindful of performance trade-offs when structuring stylesheets.

Syntax

@import url;
/* or */
@import url list-of-media-queries;

Values

urlIs a <string> or a <url> representing the location of the resource to import. The URL may be absolute or relative.
list-of-media-queriesIs a comma-separated list of media queries conditioning the application of the CSS rules defined in the linked URL. If the browser does not support any these queries, it does not load the linked resource.

Example

@import 'custom-styles.css';

@import url('../styles/colors.css');

@import url('../styles/print-styles.css') print;

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

Browser Support

The following information will show you the current browser support for the CSS at-rule @import. Hover over a browser icon to see the version that first introduced support for this CSS at-rule.