COMM-101 ESSENTIALS OF DIGITAL MEDIAReading CSS for the first time
The Riverhawk Rockets' HTML page works — but it looks pretty plain. CSS is what makes websites look designed. Let's learn how it works.
What is CSS — and why do we need it?
HTML describes what things are. CSS describes how they look. Without CSS, every website looks like a plain text document. With CSS you control color, size, spacing, and fonts — everything visual.
CSS works through rules. A rule has two parts: a selector (who gets styled) and declarations (what the style is).
h1 — the selector: "Target every h1 tag on the page"color — the property: "Which thing do you want to change?"#cc0000 — the value: "Change it to this"Everything inside
{ } is called a declaration block
In this CSS rule, what does h1 tell the browser?
Styling by tag name
The simplest selector is just the tag name. Write p and you
style every paragraph. Write h2 and you style every h2 — all at once with
one rule.
p rule would style all ten at once.If you add a second <p> tag to the page, what happens to it?
Targeting specific elements with classes
Element selectors style every matching tag. But what if you want to style just
one paragraph differently? That's what classes are for. You add a class
attribute in HTML, then target it in CSS with a dot.
Regular paragraph.
Next match: Saturday!
.highlight is CSS saying "look for a class
called highlight." In HTML you write class="highlight" — no dot needed there.h1Element selector: styles every matching tag..highlightClass selector: reusable style for selected
elements.#scoreboardID selector: one unique element on the page.
You want to style three specific list items in red, but leave the others alone. What's the best approach?
One-of-a-kind elements with IDs
A class can be reused on many elements. An ID is for one unique element only —
like the main scoreboard. You add id="..." in HTML and target it in CSS with a #.
The Rockets page has one special announcement banner that appears nowhere else. Which selector fits best?
Where does CSS actually go?
CSS usually lives in a separate .css file. You connect it to your HTML page using a
<link> tag inside the <head>.
rel="stylesheet" — tells the browser what kind of file this ishref="rockets.css" — the filename of your CSS fileThis tag goes in
<head> so styles load before the content appears.
Why does the <link> tag go inside <head> rather than
<body>?
Read the full Rockets stylesheet
Here's a complete CSS file for the Rockets page. Click each rule to toggle it on and off — watch exactly what changes in the preview below.
Your hometown soccer team since 1994. Come cheer us on every Saturday.
Next match: Saturday vs. City FC at 2pm!
When you turn off the .highlight rule, which element loses its styling?
CSS rules = selector + declaration block · Element selectors (
p, h1) style every
matching tag ·
Class selectors (.name) style reusable groups ·
ID selectors (#name) style one unique element ·
CSS links to HTML via <link> in <head>