Hosting Solutions
mobile_logo Table of Contents


The CSS @import rule is used to import style sheets into other style sheets and any documents where @import can be applied. The @import rule must be applied before any other style definitions are written, with the only exception being if there is a @charset declaration in place in the CSS, if so then @charset must be on the first line and @import can go on the very next line.

Code Example

This example is made up of three files that must all be in place for the example to work. 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 to import style sheets into index.html directly. <style> @import url("example_a.css"); @import url("example_b.css"); </style> <h1>Hello World</h1> 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 use @import in conjunction with @supports condition logic. @import url("old_browser.css") supports(not (animation-duration: 2s)); @supports (animation-duration: 2s) { /* CSS for browsers that support the animation-duration property can go here */ }

Official Documentation


At Rules

charsetcounter styledocumentfont facefont feature valuesimportkeyframesmedianamespacesupports