CSS Basics: How to Style Your First Web Page

CSS (Cascading Style Sheets) controls how HTML looks — colours, fonts, spacing, layout. Where HTML says "this is a heading", CSS says "make that heading big, blue and centred".

The anatomy of a CSS rule

Every CSS rule has three parts:

selector {
  property: value;
}

For example:

h2 {
  color: teal;
  font-size: 28px;
}

• Selector (h2) — which elements to style.
• Property (color) — what aspect to change.
• Value (teal) — what to change it to.

The three most common selectors

1. Element selector — p { ... } styles every paragraph.
2. Class selector — .card { ... } styles every element with class="card". Classes are reusable, so this is the selector you will use most.
3. ID selector — #header { ... } styles the one element with id="header".

The box model — why spacing works the way it does

Every element on a page is a box with four layers, from inside out: content → padding → border → margin. Padding is space inside the border; margin is space outside it. Getting comfortable with this one idea solves most beginner layout confusion.

Practise below

The editor contains a small card with a heading, paragraph and button, already styled. Try these challenges:

1. Change the card's border colour and make border-radius bigger.
2. Give the button a different background colour.
3. Add box-shadow: 0 4px 12px rgba(0,0,0,0.15); to the .card rule.
4. Add a new rule that makes the h2 uppercase: text-transform: uppercase;

Press Run after each change to see the effect.

Practice exercises

These go a step beyond the challenges above — each uses the same card in the editor.

Exercise 1 (easy): Write a new rule that makes the paragraph inside the card grey. Target it with .card p so paragraphs outside the card would stay untouched.

Solution:

.card p {
  color: #666;
}

Exercise 2 (medium): Make the button react to the mouse: on hover, darken its background and show a pointer cursor. You will need the :hover pseudo-class.

Solution:

button:hover {
  background: #0a5568;
  cursor: pointer;
}

Exercise 3 (challenge): Create a dark variant of the card. Add a .card-dark rule (dark background, white text), then duplicate the card <div> in the HTML tab and give the copy class="card card-dark" — one element carrying two classes.

Solution:

.card-dark {
  background: #1a2733;
  color: #fff;
  border-color: #4ADE80;
}

<div class="card card-dark">
  <h2>Dark mode card</h2>
  <p>Two classes, one element.</p>
  <button>Click me</button>
</div>