Camp 1 · Schritt 2 von 13
Three ways to add CSS
Inline, internal, and external stylesheets — and why external wins in real projects.
CSS can attach to HTML in three places. You'll see all three in the wild, so let's meet them — and rank them.
1. Inline: the style attribute
<p style="color: tomato;">Urgent note</p>Styles glued directly onto one element. Quick, but it mixes appearance into your structure, can't be reused, and becomes unmanageable fast. Use sparingly.
2. Internal: a style element
<head>
<style>
p { color: seagreen; }
</style>
</head>A stylesheet living inside the page's <head>. Fine for single-page
experiments and email templates.
3. External: a separate .css file ⭐
<head>
<link rel="stylesheet" href="styles.css">
</head>All styles live in their own file, linked from every page of the site. This is the professional default because:
- One change, whole site updates — fix a color once, not on 50 pages
- Browsers cache the file — pages load faster
- Structure and style stay separate — each file does one job
Your site has 40 pages sharing a design. Where should the CSS live?
Which HTML element connects an external stylesheet?
What's next
The real power tool: selectors — choosing exactly which elements a rule touches.