Web Development
Lesson 2 of 4 8 min +60 XP

CSS: Styling a Page

Selectors and the box model.

What you'll learn

  • Write a CSS rule
  • Target elements with selectors
  • Understand the box model
The wardrobe for the skeleton

The HTML skeleton is dressed by CSS: this heading wears bold navy, that box sits in the corner with a margin around it. Selectors pick which elements to style, and the box model decides each element's padding, border, and spacing.

Separate style from structure

CSS styles HTML. A rule has a selector (what to style) and declarations (property: value). Every element is a box with content, padding, border, and margin — the box model.

p {
  color: navy;
  padding: 8px;
}
Lab · Style a paragraph
  1. Select all <p> elements with the selector p.
  2. Set the color to navy.
  3. Add 8px of padding inside the box.

What you should see: Every paragraph turns navy with space inside its border — padding is space between content and border.

Knowledge Check

+15 XP / correct

1. In the CSS rule 'p { color: navy; }', what is the selector?

2. In the box model, the space inside the border around content is the…