Linking CSS with the Link Element
The <link> element connects an HTML document to an external resource — most commonly a stylesheet. It lives in <head>, is a void element, and supports several attributes that control when and how the stylesheet is applied.
Basic stylesheet link
<link rel="stylesheet" href="/styles/main.css" />
rel="stylesheet" tells the browser what kind of relationship this link describes.
href points to the CSS file, relative or absolute.
No closing tag is needed — link is a void element.
The media attribute
The media attribute lets you load a stylesheet conditionally, based on a media query. The browser still downloads the file, but only applies (and in some browsers, only fully evaluates) it when the condition matches.
<link rel="stylesheet" href="/styles/all.css" /> <link rel="stylesheet" href="/styles/print.css" media="print" /> <link rel="stylesheet" href="/styles/mobile.css" media="(max-width: 600px)" />
media value | Applies when |
|---|---|
screen | Any screen device (default assumption) |
Printing or print preview | |
(max-width: 600px) | Viewport is 600px wide or narrower |
(orientation: landscape) | Device is in landscape orientation |
Preloading critical CSS
For a stylesheet you know is critical to the initial render — but which the browser might discover late (e.g. one injected by JavaScript, or hidden behind an @import) — you can hint the browser to fetch it earlier with rel="preload".
<link rel="preload" href="/styles/critical.css" as="style" /> <link rel="stylesheet" href="/styles/critical.css" />
The preload link starts the download immediately at high priority; the normal stylesheet link (still required) then applies it once loaded. This pattern helps eliminate render-blocking delays for CSS the browser would otherwise discover too late.
Multiple stylesheets and cascade order
When several stylesheets apply to the same page, later link tags win ties over earlier ones for rules of equal specificity — this is the "C" in CSS, the Cascade. Order in the document matters.
<link rel="stylesheet" href="/vendor/reset.css" /> <link rel="stylesheet" href="/styles/base.css" /> <link rel="stylesheet" href="/styles/theme.css" /> <!-- theme.css rules win over base.css when specificity is equal -->
Alternate stylesheets
rel="alternate stylesheet" defines a stylesheet the user can opt into (historically via browser UI), useful for switchable themes. Give each one a title, and mark exactly one as the default persistent stylesheet (no title, or matching title) so the page has sane styling before any switching happens.
<link rel="stylesheet" href="/styles/default.css" title="Default" /> <link rel="alternate stylesheet" href="/styles/high-contrast.css" title="High Contrast" />
<link rel="stylesheet"> is a network round trip that, by default, blocks rendering — bundling and minifying your CSS usually beats splitting it into many small files.<link> is also used for favicons (rel="icon"), canonical URLs (rel="canonical"), and resource hints like preload/prefetch/preconnect — each is covered on its own page.