Part 2 · ≈ 1 h 35 m · 5 sections

CSS — Colour, Type, Boxes, Layout

How a page gets its look: colour and the three ways to attach CSS, selectors, text styling, the box model, and laying elements out.

Pick a section below. Each opens its own study page with activities.

Your path

Loading your progress…

Open a section to study. About 1 h 35 m total.

How CSS works
1. Section 8 · ~18 min
  Writing a rule, and getting it onto the page
  What a CSS rule is made of, and the three ways to attach CSS to a page.
  Share Study →
2. Section 9 · ~15 min
  Selectors — how CSS finds things
  Element, class and id selectors, and why class is the workhorse.
  Share Study →
Type and the box model
1. Section 10 · ~15 min
  Styling text
  Font family, size, weight, line height and spacing.
  Share Study →
2. Section 11 · ~22 min
  The box model
  Content, padding, border, margin — and why box-sizing matters.
  Share Study →
Laying things out
1. Section 12 · ~25 min
  Laying elements out
  Block and inline, display, position, and a first look at flexbox.
  Share Study →

From students

What people said

3.0 average · 1 comment

A student
Part 2 · Section 8: Writing a rule, and getting it onto the page
“good session”

Rate this

Web Application Development · Part 2

Opening this part…