@import in CSS
@import loads one CSS file from inside another. It must appear at the top of the file before any other rules.
Unlike <link>, @import is blocking — it delays rendering until the imported file loads.
HTML
Beginner
3 min read
The @import Rule
Example
/* At the top of styles.css */
@import url("reset.css");
@import url("typography.css");
@import url("components.css");
/* Your styles below */
body { color: #333; } Pro Tip
Prefer multiple <link> tags over @import in production — parallel loading is faster.