@import CSS At-Rule

Description

The @import CSS at-rule allows you to import the contents of a CSS file into the current style sheet. These rules must precede all other types of rules, except @charset rules; as it is not a nested statement, @import cannot be used inside conditional group at-rules.

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

Desktop
5.5	12	1	1	Yes	1
Tablets / Mobile
≤37	18	4	Yes	1	1.0