The @import CSS at-rule is used to import style rules from other style sheets.

@import url; @import url list-of-media-queries; @import url supports( supports-query ); @import url supports( supports-query ) list-of-media-queries; 

@import

The @import CSS at-rule is used to import style rules from other style sheets.

Syntax

@import url; @import url list-of-media-queries; @import url supports( supports-query ); @import url supports( supports-query ) list-of-media-queries; 

where:

url

Is a <string> or a <url>() representing the location of the resource to import. The URL may be absolute or relative.

list-of-media-queries

Is 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 of these queries, it does not load the linked resource.

supports-query

Is either a <supports-condition> or a <declaration>.

Description

Imported 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.

So that user agents can avoid retrieving resources for unsupported media types, authors may specify media-dependent @import rules. These conditional imports specify comma-separated media queries after the URL. In the absence of any media query, the import is unconditional. Specifying all for the medium has the same effect.

Formal syntax

@import [ <string> | <url> ]         [ layer | layer(<layer-name>) ]?         [ supports( [ <supports-condition> | <declaration> ] ) ]?         <media-query-list>? ;
where <supports-condition> = not <supports-in-parens> | <supports-in-parens> [ and <supports-in-parens> ]* | <supports-in-parens> [ or <supports-in-parens> ]*<media-query-list> = <media-query>#
where <supports-in-parens> = ( <supports-condition> ) | <supports-feature> | <general-enclosed><media-query> = <media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?
where <supports-feature> = <supports-decl> | <supports-selector-fn><general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )<media-condition> = <media-not> | <media-and> | <media-or> | <media-in-parens><media-type> = <ident><media-condition-without-or> = <media-not> | <media-and> | <media-in-parens>
where <supports-decl> = ( <declaration> )<supports-selector-fn> = selector( <complex-selector> )<media-not> = not <media-in-parens><media-and> = <media-in-parens> [ and <media-in-parens> ]+<media-or> = <media-in-parens> [ or <media-in-parens> ]+<media-in-parens> = ( <media-condition> ) | <media-feature> | <general-enclosed>
where <complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*<media-feature> = ( [ <mf-plain> | <mf-boolean> | <mf-range> ] )
where <compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!<combinator> = '>' | '+' | '~' | [ '||' ]<mf-plain> = <mf-name> : <mf-value><mf-boolean> = <mf-name><mf-range> = <mf-name> [ '<' | '>' ]? '='? <mf-value> | <mf-value> [ '<' | '>' ]? '='? <mf-name> | <mf-value> '<' '='? <mf-name> '<' '='? <mf-value> | <mf-value> '>' '='? <mf-name> '>' '='? <mf-value>
where <type-selector> = <wq-name> | <ns-prefix>? '*'<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector><pseudo-element-selector> = ':' <pseudo-class-selector><pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'<mf-name> = <ident><mf-value> = <number> | <dimension> | <ident> | <ratio>
where <wq-name> = <ns-prefix>? <ident-token><ns-prefix> = [ <ident-token> | '*' ]?  | <id-selector> = <hash-token><class-selector> = '.' <ident-token><attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'
where <attr-matcher> = [ '~' |  |  | '^' | '$' | '*' ]? '='<attr-modifier> = i | s

Examples

Importing CSS rules

@import 'custom.css'; @import url("chrome://communicator/skin/"); 

Importing CSS rules conditionally

@import url("fineprint.css") print; @import url("bluish.css") speech; @import "common.css" screen; @import url('landscape.css') screen and (orientation:landscape); 

Specifications

Specification
CSS Cascading and Inheritance Level 3 # at-import

See also

@media @supports

Last modified: Sep 13, 2021, by MDN contributors

Select your preferred language English (US)DeutschEspañolFrançais日本語한국어PolskiPortuguês (do Brasil)中文 (简体) Change language