Styling Pages with CSS

Use selectors, the cascade and reusable rules to create a consistent visual design.

What you will learn

• Connect an external stylesheet
• Use selectors declarations and inheritance
• Organise reusable design values

Before you begin

Create a separate practice folder and use non-sensitive sample content. Keep backup copies before restructuring files. Browser interfaces vary, so use the browser developer tools available on your computer.

Connect CSS

An external stylesheet keeps presentation separate from HTML. Link it from the document head and confirm the path before troubleshooting individual rules.

A rule contains a selector and declarations. Each declaration pairs a property with a value, such as color with a hexadecimal colour.

Understand the cascade

When rules conflict, origin, importance, specificity and source order help determine the result. Prefer simple class selectors over deeply nested or overly specific rules.

Many text properties inherit from a parent. Browser developer tools show matched rules and are faster than guessing why a style did not apply.

Build consistency

Define a small colour palette, type scale, spacing scale and border style. Reuse CSS custom properties so changes remain consistent.

Keep body text readable, line lengths comfortable and contrast strong. Decoration should support hierarchy instead of competing with content.

Guided practice

1. Create styles.css and link it to every page.
2. Style body text, headings, links and one reusable button class.
3. Inspect one element with browser developer tools.

Knowledge check

1. What is a CSS declaration?
2. Why are reusable classes helpful?
3. What can developer tools reveal?

Completion standard

Continue when you can complete the guided practice and explain the knowledge-check answers in your own words.