Four Ways to Bring CSS into an HTML Document
Inline Styles
<span style="color:#ff6600;font-weight:bold">Warning!</span>
Styles are declared directly on the element. This mixes content with presentation and quickly becomes unmaintainable, so it is only suitabel for quick prototyping or one-off overrides.
Embedded Styles
<head>
<style>
body { margin:0; font-family: sans-serif; }
nav { background:#333; color:#fff; }
</style>
</head>
The rules live inside a <style> block in the same file. Convenient for single-page demos, but duplicates code across pages in a multi-page site.
External Stylesheets via <link>
<link rel="stylesheet" href="assets/theme.css" media="screen">
The browser fetches the referenced file before rendering starts, so the page appears styled from the very first paint.
External Stylesheets via @import
<style>
@import url("assets/theme.css") screen;
</style>
The browser finishes loading the HTML, then discovers and downloads the imported CSS. On large pages this causes a flash of unstyled content (FOUC).
<link> vs. @import
| Aspect | <link> |
@import |
|---|---|---|
| Specification | HTML element | CSS at-rule |
| Load timing | Paralel with HTML | After HTML is parsed |
| FOUC risk | None | Possible on slow networks |
| Browser support | Universal | IE ≤4 ignore it |
| Dynamic changes | Can be toggled via DOM | Cannot be disabled once parsed |
| Additional roles | RSS, preconnect, prefetch… | CSS only |
In practice, <link> is the default choice for production sites because it avoids FOUC, works in every browser, and can be manipulated with JavaScript. Reserve @import for special cases such as conditional loading inside an existing stylesheet or when working inside an environment that only exposes CSS files.