Back to Unit 6

Unit 6 Website Development - Tutorial 2

2.2 Use element selectors such as body, h1, p and img

Style all matching HTML elements at once.

What You Are Adding

An element selector uses the HTML tag name. If you style p, every paragraph on the page changes unless a more specific rule overrides it. This is useful for setting site-wide defaults.

CSS To Add To css/style.css

Add or adapt this CSS in the stylesheet you created in Tutorial 1. Keep the HTML structure from Tutorial 1 and use CSS to improve the presentation.

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f3f7ff;
    color: #071332;
}

h1 {
    color: #173b93;
}

p {
    line-height: 1.5;
}

Expected Output

School Coding Club

The page text is now readable, consistent and easier to scan.

Build It Yourself

  1. Open the same unit-6-website folder from Tutorial 1.
  2. Add or update the relevant HTML class names if this page uses classes.
  3. Add the CSS shown above to css/style.css.
  4. Save the stylesheet and refresh the website in the browser.
  5. Compare your page with the expected output preview.

Common Mistakes

Success Checklist