CSS — A Comprehensive Visual Lesson

Step 1

What CSS is & three ways to add it

CSS (Cascading Style Sheets) styles your HTML — colors, fonts, spacing, layout, animation. You attach it to HTML in three ways:

Way	Looks like	Use it
Inline	`<p style="color:red">`	Rarely — hard to maintain, beats other rules.
Internal	`<style> … </style>` in the head	One-off pages or quick demos.
External	`<link rel="stylesheet" href="style.css">`	The standard — one file styles the whole site.

<!-- in your HTML <head> -->
<link rel="stylesheet" href="style.css">

Use an external stylesheet. One .css file keeps style separate from content, styles every page at once, and is cached by the browser for speed.

Step 2

The anatomy of a rule

Every CSS rule has a selector (what to style) and a declaration block of property: value pairs (how to style it).

h1selector { colorproperty: navyvalue; }

Read it as: “find every h1, set its color to navy.” Each declaration ends with a semicolon; the whole block sits in curly braces.

Step 3

Selectors: choosing what to style

Selectors target elements. The three you'll use most are type, class, and id.

Selector	Targets	Example
p	Every element of that type	`p { … }`
.card	Elements with `class="card"` (reusable)	`.card { … }`
#main	The one element with `id="main"` (unique)	`#main { … }`
.card p	A `p` inside a `.card` (descendant)	`.card p { … }`
a:hover	An element in a state (pseudo-class)	`a:hover { … }`
button, .btn	Several selectors at once (grouping)	`button, .btn { … }`

Reach for classes. Type selectors are broad and ids are unique — classes are the flexible middle you'll use for almost all styling, because you can apply the same class to many elements.

Step 4

The box model

Every element is a box made of four layers, from the inside out: content, padding, border, margin. Understanding these is half of CSS.

margin

border

padding

content

.box {
  padding: 16px;   space inside, around the content
  border: 2px solid #333;
  margin: 24px;    space outside, between boxes
}

Always add this once: *, *::before, *::after { box-sizing: border-box; }. It makes width include padding and border, so boxes are the size you actually set — no surprise overflow.

Step 5

Colors & units

Colors

Format	Example	Notes
Named	`tomato`	~140 keywords. Quick, limited.
Hex	`#2997ff`	Most common. Add 2 digits for alpha.
rgb()	`rgb(41 151 255)`	Red/green/blue, optional `/ .5` alpha.
hsl()	`hsl(212 100% 58%)`	Hue/saturation/lightness — easy to tweak.

Units

Unit	Is	Use for
px	Fixed pixels	Borders, fine details.
rem	Relative to the root font size	Font sizes & spacing — scales accessibly.
%	Relative to the parent	Fluid widths.
vw / vh	1% of viewport width / height	Full-screen heroes, big type.

Prefer rem for type and spacing. If a user bumps up their browser's default font size, your whole layout scales with them — fixed px ignores that.

Step 6

The cascade, specificity & inheritance

When two rules target the same element, who wins? CSS decides with three ideas:

Specificity — a more specific selector beats a general one. #id > .class > type.
Source order — if specificity ties, the rule written last wins.
Inheritance — some properties (like color, font) pass down to children automatically.

p        { color: gray; }     specificity 0-0-1
.note    { color: green; }    0-1-0 — beats type
#alert   { color: red; }      1-0-0 — beats class

<p class="note" id="alert"> → wins with red? It's red by id.

Avoid !important and ids for styling. They win the cascade but make later overrides painful. Lean on classes and good source order instead.

Step 7

Layout 1: Flexbox (one dimension)

Flexbox lays items out in a row or column and distributes space between them. Add display: flex to the parent.

.row { display: flex; gap: 10px; justify-content: space-between; }

justify-content: center

1

2

3

justify-content: space-between

1

2

3

Flexbox is perfect for navbars, button rows, cards in a line, and centering. justify-content aligns along the row; align-items aligns across it.

Step 8

Layout 2: Grid (two dimensions)

CSS Grid arranges items in rows and columns at once — ideal for page layouts and card galleries.

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

grid-template-columns: repeat(3, 1fr)

1

2

3

4

5

6

Want columns that wrap automatically with no media queries? grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); — the responsive workhorse.

Step 9

Responsive design with media queries

A media query applies CSS only at certain screen sizes, so your layout adapts from phone to desktop. Design mobile-first: base styles for small screens, then add for larger.

.cards { display: grid; grid-template-columns: 1fr; }   phone: 1 column

@media (min-width: 700px) {
  .cards { grid-template-columns: 1fr 1fr 1fr; }   wider: 3 columns
}

Resize this window — the lesson's own card grids and tables reflow because they use these exact techniques. Always include <meta name="viewport" content="width=device-width, initial-scale=1.0"> so phones render at the right scale.

Step 10

CSS checklist

Styles live in an external stylesheet linked in the <head>
box-sizing: border-box set globally
Styling done with classes, not ids or !important
Font sizes & spacing in rem; borders in px
Flexbox for rows/columns, Grid for 2-D layouts
Mobile-first base styles, enhanced with @media (min-width: …)
The viewport meta tag is in the HTML <head>

Where next

Go deeper on each topic

High-Level CSSThe big-picture overview. Detailed CSSEvery property in depth. CSS SelectorsAll the ways to target elements. CSS RecipesCopy-paste patterns. FlexboxOne-dimensional layout, in full. GridTwo-dimensional layout, in full. Responsive DesignMedia queries & fluid layouts. CSS TexturesGradients & background effects.