← All Lessons
YOUR PROGRESS THROUGH THIS LESSON
Lesson 03 · Web Foundations Series

What is CSS, actually?

You already saw HTML on its own last lesson — plain, unstyled, kind of ugly. CSS is the entire reason real websites don't look like that.

No coding required. Use the arrows, your keyboard, or swipe to move through.

The Core Idea

A separate layer of instructions

CSS (Cascading Style Sheets) is a set of rules that tell the browser how HTML content should look. HTML says "this is a heading." CSS says "and it should be teal, bold, and centered."

If HTML is the framing of a house, CSS is the paint, the furniture, the lighting — everything that makes it feel like a finished room instead of bare walls.

Colors & FontsLayout & SpacingOne Rule, Many Elements
Common Myth

CSS isn't just colors

If you think CSS is just "picking a color," you're missing most of it. CSS also controls layout, spacing, sizing, how a page rearranges itself on a phone versus a desktop, and even animation.

Rule of thumb: if it's about how something looks or where it sits on the page, that's CSS's job.

LayoutSpacing & SizingResponsive Design
Building Blocks — Try It

Same HTML, any look you want

CSS points at HTML and describes how it should look. Click the properties below and watch the exact same card change — the HTML underneath never moves.

CSS Added → Result

Grandma's Chocolate Chip Cookies

Crisp edges, soft centers, no fuss.

Quick Check

What does CSS actually do?

The Big "Aha" — Try It

When rules disagree, who wins?

The "C" in CSS stands for Cascading — when more than one rule targets the same element, CSS has a pecking order. Toggle the rules below and watch which one wins.

Result

View Full Recipe

Quick Check

A class selector and an ID selector both target the same element. Which wins?

Coming Next In The Series

Next up: making it do things

You've now got structure (HTML) and design (CSS). The next lesson covers JavaScript — the layer that makes a page actually respond: menus that open, forms that check themselves, content that updates without reloading.

If HTML is the framing and CSS is the paint and furniture, JavaScript is the wiring — the lights that turn on and the doors that open.

You Made It

Now make it official

You've got the concepts. The free Codecademy course below takes you through real CSS, hands-on, at your own pace. Go build something — it'll feel familiar now.