Skip to content

CSS Exercises

These exercises take your plain HTML pages and make them look like something. Work through them in order — each one adds a layer on top of the last.

Open your about.html from the HTML exercises. Create a file called style.css in the same folder.

Link the stylesheet in the <head> of about.html. Then add just these two rules to style.css:

  • Set the body background to any colour that is not white
  • Set the h1 colour to something that is not black

Save both files and refresh. If both changes appear, the link is working correctly.

Exercise 2 — Element Selectors

Still working in about.html and style.css, add rules for the following:

  • h1 — centred, larger than the browser default
  • h2 — a different colour from h1
  • p — a comfortable font size (try 16px or 17px) and a readable text colour (not pure black — try #333)
  • body — set a font-family (try Arial, sans-serif)

The page should now look noticeably more intentional than plain browser defaults.

Exercise 3 — Classes

In students.html (your table from the HTML exercises), do the following:

  • Add class="header-row" to the <tr> inside <thead>
  • Add class="odd" to the 1st, 3rd, and 5th data rows
  • Add class="even" to the 2nd and 4th data rows

In style.css, write rules for:

  • .header-row — a background colour and white text
  • .odd — a light background colour
  • .even — a slightly different light background colour

Open the page. The table should look like a proper striped table.

Exercise 4 — Spacing

Pick any one of your HTML pages. In style.css, apply spacing so that:

  • The body has padding on all sides (try 24px) so content does not touch the edges
  • Paragraphs have a margin-bottom so they breathe
  • Your submit button (if the page has one) has padding inside it — try 10px 24px

Compare how the page feels before and after. Spacing is often the difference between a page that looks finished and one that looks raw.

Exercise 5 — ID and a Centred Layout

In about.html:

  • Add id="container" to a <div> that wraps all of your body content
  • In style.css, give #container a max-width of 700px and margin: 0 auto

Open the page and widen your browser window. The content should stay centred and not stretch across the full width. This is one of the most common layout patterns on the web.

← HTML Exercises    Next: Flask and Templates →