CSS Explained: Colours, Layout and Responsive Website Design
What controls the way a web page looks? CSS supplies rules for presentation and layout.
1:47 · No narration: the video shows each step as text on screen, and every step is written out below, with buttons that jump the video to it.
Prefer YouTube? Watch this video on our YouTube channel (opens in a new tab).
The six points in the video
This is a silent video. The headings, explanations and labels below reproduce the information on screen.
-
Step 1: CSS controls presentation
Cascading Style Sheets define how content is displayed.
On-screen labels: Colours; Typography; Layout rules.
-
Step 2: Styles can be reused
Shared rules help related pages look consistent.
On-screen labels: Shared buttons; Consistent spacing; Common type styles.
-
Step 3: The cascade resolves rules
Several style rules can apply to the same element.
On-screen labels: Matching rules; Priority; Computed appearance.
-
Step 4: Layouts can adapt
Responsive rules adjust the arrangement to available space.
On-screen labels: Narrow screen; Flexible columns; Readable layout.
-
Step 5: Looks need practical checks
Text, focus indicators and contrast need careful review.
On-screen labels: Readable text; Visible focus; Clear contrast.
-
Step 6: Test beyond one screenshot
Check real content, zoom and different screen sizes.
On-screen labels: Longer content; Browser zoom; Small-screen test.
A practical check for your business
Try a representative page at different screen sizes and with longer text. Shared styles should preserve readable content and usable controls across the actual layouts the business publishes.
Sources and further detail
Common questions
What controls the way a web page looks?
CSS supplies rules for presentation and layout. Keep the design readable across real screens.
Go further
More video tips
All 205 videos →
JavaScript Explained: The Behaviour Behind Interactive Websites
JavaScript, made clear.
Frontend vs Backend: Which Part of a Website Does What?
Frontend and backend, explained.