CSS import Rule Import Style Sheet Tutorial

Learn to use the CSS @import rule. The import rule is used to import style sheets into other style sheets and any documents where @import can be applied. index.html

<link rel="stylesheet" href="example_a.css">
<h1>Hello World</h1>

example_a.css

@import url("example_b.css");
body { background: pink; }

example_b.css

h1 { color: red; font-size: 50px; }

This example shows how the @import rule can be made @media dependent for responsive layout logic.

@import url("example_b.css") handheld and (max-width: 400px);

This example shows how to import style sheets into index.html directly.

<style>
@import url("example_a.css");
@import url("example_b.css");
</style>
<h1>Hello World</h1>