What Is @import In CSS 2023

The @import at-rule in CSS allows you to import style rules from other stylesheets and incorporate them into your current stylesheet. This can be useful if you want to reuse the same styles across multiple pages, or if you want to organize your styles into separate files for easier maintenance. The @import rule must come before any other types of rules in your stylesheet, with the exception of @charset rules and layer-creating @layer statements. Additionally, the @import rule cannot be used inside conditional group at-rules.

@import url("fineprint.css") print;
@import url("bluish.css") print, screen;
@import "common.css" screen;
@import url("landscape.css") screen and (orientation: landscape);
@import url("narrow.css") supports(display: flex) screen and (max-width: 400px);

The @import rule also allows you to specify media-dependent import conditions, using media queries after the URL of the stylesheet to be imported. This allows you to import stylesheets only for certain media types, such as print or screen, and avoid retrieving resources for unsupported media types.

Finally, the @import rule can be used to create a cascade layer by importing rules from a linked resource, or to import rules into an existing cascade layer. The layer keyword or the layer() function can be used with @import for this purpose. The imported style rules interact with the cascade as if they were written directly into the stylesheet at the point of the import. This allows for more flexible and dynamic styling in your document.