Linking CSS to HTML
The three ways to add CSS to a page — external stylesheets, the style tag, and inline styles — and when to use each.
2 min read
CSS has to reach an HTML document somehow. There are three ways to do it, and they aren't interchangeable — each has a different scope and a different place in a real project.
External stylesheets (the one you'll use most)
<head>
<link rel="stylesheet" href="styles.css" />
</head>/* styles.css */
body {
font-family: system-ui, sans-serif;
margin: 0;
}The <link> tag points to a separate .css file. This is the standard approach for real projects: the browser can cache the file across page loads, multiple pages can share one stylesheet, and your markup stays free of styling clutter.
The <style> tag
<head>
<style>
body {
font-family: system-ui, sans-serif;
}
</style>
</head>This embeds CSS directly in the HTML document instead of a separate file. It's useful for a quick demo, a single-page prototype, or email templates (which often can't load external files) — but for anything with more than one page, it means duplicating the same styles everywhere.
Inline styles
<p style="color: red; font-weight: bold;">Careful!</p>The style attribute applies CSS to one single element, with no selector needed. It's the most specific of the three (it beats almost everything in the cascade), which is exactly why it's usually a last resort: it's the hardest to override, can't be reused, and mixes styling into your markup. Reach for it only when a style is generated dynamically by JavaScript and truly applies to one element only.
Why external stylesheets win in practice
<head>
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="styles.css" />
</head>You can link more than one stylesheet, and order matters — later files (or later rules within a file) can override earlier ones when specificity is equal. This is commonly used to load a small "reset" stylesheet before your own styles, ironing out inconsistent browser defaults before you build on top of them.
A note on <link> placement
Stylesheets are almost always linked in <head>, not at the end of <body> (unlike <script> tags, which are often placed at the end). The browser needs the CSS before it can safely paint the page — loading it early avoids a flash of unstyled content where the page briefly renders without its styles and then jumps once they arrive.