Unit 6 Website Development - Tutorial 2
2.5 Style text using colour, font family, font size, font weight and line height
Make website text readable and consistent.
What You Are Adding
Text styling controls how easy the website is to read. Good CSS uses a readable font, clear colour contrast, sensible font sizes, careful bold text and line height that gives each line enough space.
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;
color: #071332;
}
h1 {
color: #173b93;
font-size: 42px;
font-weight: 800;
}
p {
font-size: 18px;
line-height: 1.5;
}
Expected Output
School Coding Club
The page text is now readable, consistent and easier to scan.
Build It Yourself
- Open the same unit-6-website folder from Tutorial 1.
- Add or update the relevant HTML class names if this page uses classes.
- Add the CSS shown above to css/style.css.
- Save the stylesheet and refresh the website in the browser.
- Compare your page with the expected output preview.
Common Mistakes
- Editing the HTML page but forgetting to save css/style.css.
- Using a different class name in HTML and CSS.
- Adding lots of one-off styles instead of reusing clear selectors.
Success Checklist
- The CSS has been added to css/style.css.
- The page still uses the Tutorial 1 HTML structure.
- The result is close to the expected output preview.
- The page remains readable and easy to use.