How to Add CSS
There are three ways to attach CSS to a page — inline, internal, and external — and one of them is right 95% of the time. Learn all three, and why external stylesheets win.
1. Three ways in
<!-- 1. Inline: style attribute (avoid) -->
<p style="color: red;">Urgent note</p>
<!-- 2. Internal: a <style> block in <head> -->
<style>
p { color: #3E6787; }
</style>
<!-- 3. External: a linked .css file (best) -->
<link rel="stylesheet" href="styles.css">- Inline styles glue design to markup, can't be reused, and out-rank almost everything — making later overrides painful.
- Internal
<style>blocks are fine for one-off pages and email templates. - External files cache in the browser, style unlimited pages, and keep code and design cleanly separated. This site you're on works exactly that way — one
site.cssfor every page.
2. Load order matters
Stylesheets apply in the order they load, so a later <link> can override an earlier one at equal specificity. Teams exploit this deliberately: a base sheet first, a theme sheet after. Put your <link> tags in <head> so the page never renders unstyled.
3. Try it yourself
This page's paragraph is styled inline. Move the styling into the internal <style> block instead (delete the style attribute, add a rule), and make it #2FAF71.
4. Quiz — check your understanding
How to Add CSS Quiz
4 questions · pass at 60%Q1. Which method is recommended for styling a multi-page site?
Q2. Where should the <link rel="stylesheet"> tag go?
Q3. Why are inline styles discouraged?
Q4. Two linked stylesheets set the same property with equal specificity. Which applies?
Every lesson quiz you pass (60%+) is saved in your browser and counts toward the CSSmatic Certificate of Completion.