CSS Getting started with CSS CSS @import rule (one of CSS at-rule)


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

    @import url('/css/styles.css');

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:

@import '/additional-styles.css';

Importing external CSS is also possible. A common use case are font files.

@import 'https://fonts.googleapis.com/css?family=Lato';

An optional second argument to @import rule is a list of media queries:

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