CSS @import Rule


Example

Import the "navigation.css" style sheet into the current style sheet:

@import "navigation.css"; /* Using a string */

or

@import url("navigation.css"); /* Using a url */

More examples below.


Definition and Usage

The @import rule allows you to import a style sheet into another style sheet.

The @import rule must be at the top of the document (but after any @charset declaration).

The @import rule also supports media queries, so you can allow the import to be media-dependent.


Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
@import 1.0 5.5 1.0 1.0 3.5


CSS Syntax

@import url|string list-of-mediaqueries;

Property Values

Value Description
url|string A url or a string representing the location of the resource to import. The url may be absolute or relative
list-of-mediaqueries A comma-separated list of media queries conditioning the application of the CSS rules defined in the linked URL

More Examples

Example

Import the "printstyle.css" style sheet ONLY if the media is print:

@import "printstyle.css" print;

Example

Import the "mobstyle.css" style sheet ONLY if the media is screen and the viewport is maximum 768 pixels:

@import "mobstyle.css" screen and (max-width: 768px);

Copyright 1999-2023 by Refsnes Data. All Rights Reserved.