CSS — The Design Layer

If HTML is the skeleton of a web page, CSS is the skin, the paint, and the typography choices on top. It controls every visual property you can see — colors, fonts, sizes, spacing, and layout. Without CSS a page is plain black text on a white background. With CSS it becomes a designed experience.

Think of it this way: HTML is your Figma frame structure — layers stacked and nested. CSS is the fills, strokes, font styles, and spacing rules you apply to those layers. The structure and the style live separately, and that separation is intentional. It means you can redesign the look of a page without touching its content, or reuse the same styles across hundreds of pages from one file.

CSS stands for Cascading Style Sheets. The “cascading” part means styles can come from multiple sources and rules for which one wins are predictable — we will cover that later. For now, think of a stylesheet as a design spec file: a list of rules that say “this element should look like this.”

What you will learn in this module

Lesson	Topic
1	Selectors — targeting the right elements
2	Colors & Units — values that make sense
3	Typography — fonts, sizes, line height
4	Box Model — spacing and sizing
5	Backgrounds & Borders — surface design

Anatomy of a CSS rule

Every CSS rule has the same shape:

selector { property: value; }

Selector — which elements to style. h1 targets all <h1> headings. .card targets every element with class="card".
Property — what visual attribute to change. color, font-size, padding, background-color.
Value — what to set it to. #7C3AED, 1.5rem, 2px solid black.

A real example:

h1 {
  color: #7C3AED;
  font-size: 2rem;
}

Read it aloud: “Every h1 heading: set the text color to purple, and the font size to 2rem.” That is exactly how a designer would write a text style spec.

Three ways to add CSS

Inline — <h1 style="color: purple;"> — works, but hard to maintain. Like hardcoding values instead of using a design token. Avoid it.
<style> tag — CSS written inside the <head> of your HTML file. Fine for small experiments.
External .css file — a separate file linked with <link rel="stylesheet" href="styles.css"> in the <head>. This is the standard approach for real projects — one file, many pages.

In this course the LivePreview editor below handles all of that for you. You write CSS in the right panel and the browser applies it instantly.

Your first styled card

The HTML below is a simple card — fixed, you do not need to change it. The CSS on the right is yours to edit. Try changing the background-color, the color, or the font-size values and watch the card update live.

<div class="card">
  <h2>Visual Design</h2>
  <p>CSS gives you control over every pixel — just like Figma, but in the browser.</p>
</div>