Skip to content
Chapter 02 of 07 · 3 lessons · ~27 min

The Box Model, Text and Backgrounds

Understand how every element is a box with padding, border and margin, then style text with real fonts and add background images, colors and gradients.

YOUR PROGRESS0%
/ Lessons in this chapter
05
The CSS Box Model Explained How every element is a box made of content, padding, border and margin, and how to control spacing with confidence. Coming soon
06
CSS Fonts: Google Fonts and Typography How to add Google Fonts, set a readable type scale, and style text like a professional designer. Coming soon
07
CSS Backgrounds: Images, Colors and Gradients How to add background images that look good on every screen, plus overlays and gradients. Coming soon

Chapter practice task

Task: Style a services card with real spacing, fonts and a background

  1. Add * { box-sizing: border-box; } to the top of your stylesheet.
  2. Build a card with a title, text and button, and give it padding, a border and a rounded corner.
  3. Load a Google Font for headings and a readable font for body text.
  4. Give the hero section a background image with a dark overlay so white text stays readable.
  5. Check the card in DevTools and read the box model diagram.

By the end of this chapter

  • You can control spacing with padding, border and margin, and fix “extra space” problems
  • You can add Google Fonts and set a readable type scale
  • You can use background images, gradients and overlays

Quick answers for this chapter

What’s the difference between margin and padding?

Padding is space inside the element’s border; margin is space outside it.

How many fonts should a site use?

One or two. Usually one for headings and one for body text.

Do background images hurt speed?

Large ones can. Compress them and use WebP to keep pages fast.