Module 1 · Getting Started · Lesson 1 of 5

CSS Introduction

Beginner ⏱ 10 min3 sections · 1 exercise · 4-question quiz

CSS — Cascading Style Sheets — is the language that turns structured HTML into designed pages: color, spacing, layout, motion. In ten minutes you'll write your first rule and understand how the browser decides what wins when rules disagree.

1. What CSS is (and isn't)

HTML describes what things are — a heading, a paragraph, a list. CSS describes how they look. Keeping the two separate means one stylesheet can restyle a thousand pages, and one page can wear many designs.

CSS — your first rule

h1 {
  color: #3E6787;
  font-size: 40px;
}

Read it aloud: "for every h1, make the color steel blue and the size 40 pixels." The part before the braces is the selector; each property: value; pair inside is a declaration.

2. The cascade: who wins

"Cascading" is the C in CSS. When several rules target the same element, the browser resolves the conflict in order: origin and importance first, then specificity (how precise the selector is), then source order (later rules beat earlier ones).

CSS — the later rule wins

p { color: gray; }
p { color: black; }   /* same specificity, later — wins */

💡 You'll master specificity properly in the Specificity & Architecture lesson. For now: more specific beats less specific, and later beats earlier.

3. Where the road leads

This path takes you from here to a finished, responsive project page: colors and backgrounds first, then the box model, typography, real layout with Flexbox and Grid, responsive design, visual effects, motion, and finally architecture and performance. Every lesson ends with a quiz; pass them all and the certificate is yours.

4. Try it yourself

Change the heading's color to #E0594A (coral) and make the paragraph gray. Press Run Code.

exercise.html — editable

5. Quiz — check your understanding

CSS Introduction Quiz

4 questions · pass at 60%

Q1. What does CSS control?

The structure of the pageThe presentation and layout of the pageThe server the page runs onThe database behind the page

HTML holds structure and meaning; CSS holds the presentation — colors, spacing, layout, motion.

Q2. In h1 { color: red; }, what is h1?

A declarationA propertyA selectorA value

The selector chooses which elements the rule applies to; color: red is the declaration inside it.

Q3. Two rules with equal specificity target the same element. Which wins?

The first one writtenThe one that appears laterThe shorter oneNeither — it's an error

With equal specificity, source order decides: the later rule wins. That's part of the cascade.

Q4. What does the "cascading" in CSS refer to?

Animations flowing down the pageThe algorithm for resolving conflicting rulesLoading styles from multiple serversNested HTML elements

The cascade is the conflict-resolution system: importance, specificity, then source order.

Further reading: the exhaustive property-by-property reference at MDN Web Docs pairs well with this path.

🏆

Quiz passed? You're one step closer to your certificate.

Every lesson quiz you pass (60%+) is saved in your browser and counts toward the CSSmatic Certificate of Completion.

Track my progress →

CSS Introduction

1. What CSS is (and isn't)

2. The cascade: who wins

3. Where the road leads

4. Try it yourself

5. Quiz — check your understanding

CSS Introduction Quiz

Practice with these generators