Three Ways In, One You Should Use
CSS can be written in an attribute, in the head, or in its own file, and only one of those scales past a single page. See what a rule is made of, then meet the styles the browser applied before you wrote anything.
Read first: The Skeleton Every Page Has
CSS can be written in an attribute, in the head, or in its own file, and only one of those scales past a single page. See what a rule is made of, then meet the styles the browser applied before you wrote anything.
A rule is a selector and a block of declarations
All of CSS is this shape. Learn the four words and every error message afterwards is readable.
h1 { color: #1e3c2c; font-size: 32px; }│ └──┬──┘ └───┬───┘│ │ └── value│ └── property ← property: value is one DECLARATION└── selector ← the { … } is the DECLARATION BLOCKWhich elements. h1, .card, nav a — chapter 12 is entirely about these.
What aspect to change. color, font-size, margin. There are several hundred; you will use about forty.
What to change it to. Valid values depend on the property, and an invalid one is silently discarded.
One property and value pair. The semicolon after it is optional on the LAST one and required on every other — so always write it.
Formatting is entirely free. One line or many, spaces or not — the browser does not care. One declaration per line is conventional because it makes diffs readable and mistakes visible.
Comments are /* like this */ — there is no single-line comment form in CSS, and // does not work.
Inline styles are the fastest and the worst
The first way in: a style attribute directly on an element.
<p style="color: red; font-size: 18px;">Some text.</p>No selector, because there is nothing to select — it applies to this element and only this one. It is the quickest possible way to see a change, and it is the worst way to build anything.
Why it fails
It applies to one element, so styling twenty paragraphs means twenty copies. Changing them means twenty edits. It mixes appearance back into your markup, which is the separation chapter 2 was about. And it beats almost every rule in your stylesheet on specificity, so overriding it needs !important.
When it is fine
A one-off value that cannot be known in advance — a progress bar's width, a colour swatch from data. That is why several interactives in this course use it: the value is the thing being demonstrated. Handwritten static styling is a different matter.
A style tag works for exactly one page
The second way: a <style> element in the head. Now you can write real rules with real selectors.
<head> <title>My page</title> <style> h1 { color: #1e3c2c; } p { line-height: 1.6; } </style></head>Much better: one rule styles every matching element on the page. The limit is in the name — it is on this page. A second page needs its own copy, and now two files must be kept in step by hand.
An external stylesheet is the real answer
The third way, and the one to use for essentially everything: a separate .css file, linked from the head.
<head> <meta charset="utf-8"> <title>My page</title> <link rel="stylesheet" href="styles.css"></head>body { font-family: system-ui, sans-serif; line-height: 1.6; color: #333;} h1 { color: #1e3c2c; font-size: 2rem;}Note that the CSS file contains no HTML, no <style> tags, nothing but rules. Putting a style tag inside a .css file is a common first-day mistake: the browser reads the tag as part of the next selector, decides that rule is invalid, and throws it away — and developer tools may report a stylesheet parsing error.
Link the same stylesheet from all of them. Change a colour once and the whole site changes.
The browser downloads it once and reuses it across pages, so every page after the first is faster.
Markup is structure, stylesheet is appearance. You can restyle a site completely without touching a single HTML file.
Multiple <link> elements load in order, and later files can override earlier ones. Useful for splitting a large stylesheet.
One thing to watch: href is a path, and it follows the same rules as chapter 7. A stylesheet in a css/ folder is href="css/styles.css", and from a page one level deep it is href="../css/styles.css". A page that is suddenly unstyled is almost always a wrong path, not broken CSS — devtools' network tab shows a 404.
The browser had a stylesheet before you did
Open a page with no CSS whatsoever and headings are still large and bold, links are still blue and underlined, lists still have bullets. Something styled them, and it was the browser.
Every browser ships a user-agent stylesheet. It is a real stylesheet with real rules, and your CSS is layered on top of it rather than replacing it.
h1 { font-size: 2em; font-weight: bold; margin: 0.67em 0; }p { margin: 1em 0; }a { color: -webkit-link; text-decoration: underline; }ul, ol { padding-left: 40px; }body { margin: 8px; }That last one explains a question every beginner asks: the small white gap around the edge of the page is body { margin: 8px }, applied by the browser.
Because these defaults differ slightly between browsers, most projects start with a reset — a few rules that normalise them. A minimal one is three rules and covers most of the pain:
*, *::before, *::after { box-sizing: border-box; /* chapter 14 — the important one */} body { margin: 0; /* remove the browser's 8px */} img { max-width: 100%; /* never overflow the container */ height: auto;}Key takeaways
- A rule is a selector plus a block of declarations; a declaration is one property and value.
- Semicolons are optional after the last declaration and required after every other, so always write them.
- CSS fails silently: an invalid declaration is discarded and the missing semicolon usually kills the NEXT line too.
- Comments are /* … */ only. There is no // in CSS.
- Inline style attributes apply to one element, mix appearance into markup, and beat almost everything on specificity.
- A <style> tag in the head works well and works for exactly one page.
- An external .css file linked with <link rel="stylesheet"> is the answer for essentially everything.
- A .css file contains rules only — no <style> tags, no HTML.
- An unstyled page is usually a wrong href path, not broken CSS. Check the network tab for a 404.
- The browser applied its own stylesheet first; your CSS layers on top. body { margin: 8px } is where the page's edge gap comes from.
Before you move on
Quick check
Answer these to unlock the next chapter: 3 of 4 to pass. You can retake it anytime.
Make a free account to read on
Every chapter is free — an account lets your course progress follow you from your laptop to your phone. No payment, no trial.