CSS @import rule (one of CSS at-rule)

For general web development questions using HTML and CSS.
Post Reply
admin
Site Admin
Posts: 44

CSS @import rule (one of CSS at-rule)

Post by admin » Tue May 19, 2020 2:13 am

The @import CSS at-rule is used to import style rules from other style sheets. 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. @import.

How to use @import
You can use @import rule in following ways:
A. With internal style tag

Code: Select all

 <style>
 @import url('/css/styles.css');
 </style>
B. With external stylesheet
The following line imports a CSS file named additional-styles.css in the root directory into the CSS file in which it
appears:

Code: Select all

@import '/additional-styles.css';
Importing external CSS is also possible. A common use case are font files.

Code: Select all

@import 'https://fonts.googleapis.com/css?family=Lato';
An optional second argument to @import rule is a list of media queries:

Code: Select all

@import '/print-styles.css' print;
@import url('landscape.css') screen and (orientation:landscape);

Post Reply