Importing a CSS file using @import

Importing a CSS file using @import with Example Program | Definition & Syntax of CSS @import Property

by

Are you looking for the best ways to import another CSS file into CSS files? Then, you can simply use the CSS @import property. Want to know more about the property of CSS import? Just follow this tutorial till to the end and get information on Importing a CSS File using @import, etc.

CSS @import Property

The @import rule enables you to import a style sheet into another CSS style sheet. Also, it must be at the top of the document (but after any @charset declaration). Moreover, this helps media queries, so anyone can provide the import to be media-dependent. Look at the below sections and check out the syntax for importing.

Syntax

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

Property Values

where:

  • URL/string: <string> or <url>() represents the location of the resource to import. We can place absolute or relative URLs in the url() reference.
  • list-of-media-queries: This 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>.

Also Check: The CSS Backgrounds Tutorial

Formal syntax

@import [ <string> | <url> ] [ <media-query-list> ]?;
where 
<media-query-list> = <media-query>#

where 
<media-query> = <media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?

where 
<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 
<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 
<media-feature> = ( [ <mf-plain> | <mf-boolean> | <mf-range> ] )
<general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )

where 
<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 
<mf-name> = <ident>
<mf-value> = <number> | <dimension> | <ident> | <ratio>

Example using @import 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);

How to include one CSS file in another?

Do you think it is not possible to import one CSS file into another? Then you are wrong. Because it is possible to include one CSS file in another using CSS @import rules. Also, it can be done various times in the main HTML file or in the main CSS Style sheets. Look at the below example using the @import keyword:

Example:

<!-- Including one css file into other -->
@import "style2.css";
   
 h1 {
     color:green;   
 }
   
.css1 {
     color:black;
     background-image: linear-gradient(to right, #DFF1DF, #11A00C);
     position:static;   
 }

One thing to keep in mind that, the @import statements should be placed at the top/beginning of the CSS file to stop being ignored.
We can also use descriptors along with the @import statements.
Example:

@import url(mystyle.css) all;
@import url(mystyle-screen.css) screen;
@import url(mystyle-print.css) print;