Three ways to add CSS to a page
Before styling anything, you need to know where CSS actually lives. There are three ways to attach it to your HTML, and only one of them is worth using regularly.
For any real project, use an external stylesheet. It keeps your HTML clean and lets you reuse the same styles across multiple pages — exactly how professional sites are built.
Selectors: telling CSS what to style
A selector is how you point at the HTML element you want to style. The most common ones:
| Selector | Targets | Example |
|---|---|---|
h1 | Every <h1> on the page | h1 { color: navy; } |
.classname | Any element with class="classname" | .card { padding: 10px; } |
#idname | The one element with id="idname" | #header { background: black; } |
Use classes for anything you'll style more than once (like .card for repeated content boxes), and IDs only for something unique on the page, like a single header.
Leveling up: combining selectors and pseudo-classes
Real stylesheets rarely use just one selector at a time. A few patterns you'll use constantly:
Pseudo-classes (the colon syntax like :hover) target a state or position rather than a fixed element — they're how buttons change color when you hover over them, or how the first item in a navigation menu gets special styling.
Color: three ways to write it
Named colors are fine for quick tests, but hex codes are what you'll see in almost every real codebase — they give you access to any color, not just a limited named list.
Fonts: family, size, and weight
Always list a fallback after your chosen font (like serif or sans-serif above) — if the browser can't load your font, it falls back to something similar instead of breaking the layout.
<link> tag to paste in your <head>, then you reference the font name in your CSS exactly like any other font.
Spacing: your first look at margin and padding
Two properties control the space around and inside elements. We'll go much deeper into this in Lesson 3, but here's the difference in one sentence: padding is space inside the element's border, margin is space outside it, pushing other elements away.
Try it yourself
index.html file you built in Lesson 1. Add a <style> block inside <head>, and give your <h1> a color of your choice, your <body> a font-family, and your <p> some padding. Refresh the page in your browser and watch it actually start to look designed.
Units: px, %, em, and rem
Every size in CSS needs a unit, and picking the right one matters more than beginners expect.
| Unit | Means | Use it for |
|---|---|---|
px | A fixed pixel size, never changes | Borders, small fixed details |
% | Relative to the parent element's size | Widths that should flex with the container |
em | Relative to the current element's font size | Spacing that should scale with text size |
rem | Relative to the root (page-wide) font size | Font sizes — the most predictable choice for text |
If you're not sure which to use: rem for font sizes, px for borders and small fixed details, and % for widths that need to adapt to different screen sizes.
Styling text: alignment, line height, and decoration
line-height is the one beginners skip most often — and it's usually the single biggest reason a paragraph of text feels cramped or hard to read. A value between 1.4 and 1.6 is a safe default for body text.
Backgrounds: color vs. image
You can combine both — the color shows immediately while the image loads, and stays visible as a fallback if the image fails to load at all.
Putting it all together
Here's a small, complete example combining everything from this lesson into one realistic component — a simple card:
Notice how every property here is something you already learned above — a selector, a color, a font, some spacing, and a pseudo-class. Real CSS is mostly this: combining a handful of properties you already know, over and over, on different elements.
Level up: style a full card
<div class="card"> to your page with a heading and a paragraph inside it. Style it using the card example above as a starting point, then make it your own — try changing the background on hover, adjusting the padding, or using a Google Font instead of Georgia.