CSS is useless until it reaches your HTML. There are three ways to connect them, and choosing the right one keeps your project clean. Let us look at all three and when to use each.
Three ways to add CSS
| Method | How | Use when |
|---|---|---|
| External | <link> to a .css file | Almost always — best practice |
| Internal | <style> in the head | A single one-off page |
| Inline | style="..." on an element | Quick tests only — avoid |
External stylesheet (recommended)
In real projects you keep CSS in a separate file and link it from the HTML head. One file can style your entire site, and the browser caches it for speed.
<link rel="stylesheet" href="styles.css">- Element
<link> - Relationship
rel="stylesheet" - File
href="styles.css"
Internal CSS
For a single page, you can put CSS in a <code><style></code> tag inside the head. This is what our live examples use.
<h1>Hello</h1>
<p>Internal CSS styles this page.</p>h1 { color: #2563eb; }
p { color: #555; }Inline CSS (avoid)
You can put styles directly on an element with the <code>style</code> attribute, but avoid it: it cannot be reused, it is hard to maintain, and it has very high specificity that causes problems later.
<p style="color:red;font-size:18px">Hi</p>/* in CSS */
.note { color: red; font-size: 18px; }Inline styles scatter your CSS and are nearly impossible to maintain across a site. Keep styles in one place.
Use one external stylesheet for a real site. It is cached, reusable, and keeps your HTML clean and readable.
In the live example, add a rule that gives the paragraph a background colour and some padding. Notice how the CSS pane behaves like an external stylesheet.
1. Best way to add CSS to a real site?
2. Where does a <link> to CSS go?
3. Why avoid inline styles?
- Three ways to add CSS: external (best), internal, inline (avoid).
- External stylesheets link via <link rel="stylesheet"> in the head.
- One external file can style a whole site and is cached.
- Inline styles hurt reuse and maintainability.