HTML & CSS reference

@import

Includes another CSS file into the current one.

Syntax

@import url("file.css") layer(name);

Parameters

Parameter	Type	Description
url	string	The address of the file: `@import "reset.css";`.
layer()	function	Puts the imported styles into a cascade layer.
media	condition	A condition: `@import "print.css" print;`.

Examples

An imported style sheet (here it is embedded right into the address so the example works on its own):

<style>
  @import url("data:text/css,.note{background:lightyellow;padding:8px;border-left:4px solid gold}");
</style>
 
<p class="note">This style came from an imported style sheet.</p>

Notes

@import must come before all other rules except @charset and @layer declarations. The browser discovers imported files only after loading the main one, so the page appears later; several <link> tags or a build tool are faster.

Related recipes

How to connect a CSS file to a page

In the tutorial

Cascade layers: @layer — The @layer rule — how layers change the cascade, the order of layers, unlayered styles, putting files and third-party libraries into a layer.

Thanks for reading!