website-building-css-responsive-design

Website Building · Lesson 4 of 8

Style a Responsive Page with CSS

Create a clear ITIAN-inspired visual system and make the page adapt smoothly from phones to large screens.

Complete beginner
90 minutes
Guided practical activity
Part of one website project

Course progressLesson 4 of 8Lesson 4 of 8

Lesson outcomes

By the end of this lesson, you can…

Connect styles.css correctly.
Use selectors, properties, values and reusable custom properties.
Apply the box model, Grid or Flexbox and responsive images.
Test readability, focus visibility and layout at different widths.

Prepare

Before you begin

What you need

The complete HTML page from Lesson 3.
The empty styles.css file in the project folder.
A small colour palette with strong text contrast.

Starter check

Open index.html and styles.css side by side. Confirm the unstyled page works before adding CSS so structure and styling problems remain separate.

Learn

Understand and demonstrate the skill

CSS controls presentation while HTML keeps the structure meaningful. A small reusable system for colour, spacing, typography and layout produces a more consistent page than many isolated declarations.

Key terms

Selector, property and value

The selector chooses the HTML; the property names what changes; the value defines the setting.

Cascade

The rules CSS uses to resolve competing declarations.

Box model

Content surrounded by padding, border and margin.

Media query

A conditional CSS block for a viewport or user preference.

Lesson 4 demonstration mediaAdd a current screenshot or short demonstration video before final publication when available.

Follow the demonstration

Set predictable foundations. Apply box-sizing, body margin, type, line height, colours and responsive images.
Create design tokens. Store core colours, content width and spacing as custom properties.
Style content and actions. Improve headings, sections, links and buttons while keeping focus obvious.
Add a flexible layout. Use Grid with minmax or a targeted media query.
Test several widths. Resize gradually and fix the content where it breaks, not for a named device.

Worked example

* { box-sizing: border-box; }
:root {
  --navy: #061424;
  --gold: #d4af37;
  --green: #7ed957;
}
body {
  margin: 0;
  color: #172536;
  font: 1rem/1.6 Arial, sans-serif;
}
img { max-width: 100%; height: auto; }
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}
a:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

Your turn

Complete the guided activity

Style your HTML page with one consistent palette, readable typography, flexible spacing and a layout that works without horizontal scrolling.

Prepare. styles.css is linked and the browser applies it.
Build. Text has readable line length, spacing and contrast.
Check. Links and buttons have visible hover and keyboard-focus states.
Record. The page works at narrow and wide widths without horizontal scrolling.

Activity checklist

styles.css is linked and the browser applies it.Text has readable line length, spacing and contrast.Images shrink inside their containers without distortion.Links and buttons have visible hover and keyboard-focus states.The page works at narrow and wide widths without horizontal scrolling.

0 of 5 tasks

0 of 5 tasks complete0%

Knowledge check

Check your understanding

Answer all three questions, then review any topic that needs another look.

Complete all three questions, then check your answers.

Complete the lesson

Review, reflect and continue

Success criteria

The same page is readable on phone-sized and desktop-sized views.
Colours, spacing and typography are consistent.
Interactive controls remain obvious for mouse and keyboard users.

Reflection prompt

Which CSS change improved the page most, and which design choice will you reuse on future pages?

Continue to Lesson 5