Unit 6 Website Development - Tutorial 2
2.1 Understand CSS selectors
Learn how CSS finds the HTML elements you want to style.
What You Are Adding
A CSS selector tells the browser which HTML element should receive a style. The selector comes before the curly braces, and the style rules go inside the braces as property and value pairs.
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.
h1 {
color: #173b93;
}
p {
font-size: 18px;
}
Expected Output
selector
h1property
colorvalue
#173b93
h1property
colorvalue
#173b93
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.