How to import Styles Sheets in a CSS File

Leave a Comment

Importing Style Sheets in a CSS File

@import is a @-rule which can be used inside a css style sheet.

The most common syntax is

@import url;

Here, url is the absolute or relative path of the style sheet needs to be included.

Examples:

@import 'reset.css'; 

OR

@import url("reset.css");

@import url("./slider/slider.css");

Another syntax is

@import url media-queries;

here, media-queries is the comma-separated list of media queries (e.g. print, screen, projection), to put the condition on loading of the linked style sheet. If browser doesn’t support the media listed, it won’t load the linked style sheet.

Example:

@import 'print-style.css' print;

Common use of @import is to add/import the reusable styles to your style sheet.

The style sheet should not have any CSS Rule defined before @import.

Leave a Reply