Start learning →

Boxes, text and decoration

How every element takes up space, how to make text comfortable to read, and how to add colour, depth and shape with a few lines of CSS.

About 5 hours of study

Learning objectives

Lessons

  1. 1

    The box model

    Every element is a box made of content, padding, border and margin. Learn how sizes are calculated, why margins collapse, and how to centre a block.

  2. 2

    Text and fonts

    Choose font stacks, load web fonts without blocking the page, and set line height, line length and spacing so that long text is pleasant to read.

  3. 3

    Backgrounds, borders and shadows

    Use colours, images and gradients as backgrounds, then round corners and add shadows to give flat boxes a sense of depth.

Module practice

Module quiz

1. A border-box element has width 300px, padding 20px and a 5px border. How wide is it in total?
2. Why might the space between two paragraphs be smaller than their margins added together?
3. How do you centre a block of 600px maximum width?
4. Why is a very long line of text a problem?
5. What does font-display: swap prevent?
6. You set opacity: 0.5 on a card, and now the text is faded too. What should you use instead?

‹ How CSS thinksLayout ›