CSS: Style and Lay Out Web Pages
Learn to style real web pages: selectors, the cascade, the box model, flexbox, grid, positioning, responsive design, animation and how to keep a stylesheet under control.
- Level
- Beginner
- Time
- About 26 hours
- Modules
- 4
- Lessons
- 16
- Exercises
- 48
HTML gives a page its structure, and CSS decides how that page looks and how it behaves on different screens. Many people find CSS confusing because they learn its properties one by one, without the handful of ideas underneath them. This course starts with those ideas: why one rule beats another, and how boxes get their size.
From there you learn flexbox and grid, the tools that real layouts are built with today, and how to make a page adapt to any screen. Your work is checked against what the browser really computes, so you always know that a rule is doing what you intended, and not merely that the page looks close.
What you will learn
- Predict which CSS rule wins and explain why
- Size and space elements with the box model
- Build page layouts with flexbox and grid
- Make pages that adapt to any screen and respect user settings
- Organise and debug a stylesheet
Skills you will gain
- Writing precise, low-specificity selectors
- Building responsive layouts
- Creating themes with custom properties
- Animating interfaces accessibly
- Debugging styles with browser developer tools
Before you start
- The HTML course on StepVioz, or the ability to write a basic page with headings, lists and links
- A modern browser
- No programming experience is needed
Where it is used
- Every website and web application
- Design systems and component libraries
- CSS frameworks such as Bootstrap and Tailwind CSS
- Mobile apps built with web technology
Modules
Module 1: How CSS thinks
The ideas underneath everything else: how a rule is built, how to choose elements precisely, how conflicts are settled, and how colours and sizes are written.
- 1
What CSS is and how it reaches a page
How CSS separates a page's look from its content, how a rule is built, the three places styles can live, and why browsers skip what they cannot read.
- 2
Selectors: choosing what to style
Select elements by type, class, id, attribute and position in the page, and combine selectors precisely without writing fragile ones.
- 3
The cascade, specificity and inheritance
Why one CSS rule beats another, how specificity is counted, what inherits from parents, and how to resolve conflicts without reaching for !important.
- 4
Colours, units and values
Write colours in several formats, choose between px, em, rem, percentages and viewport units, and compute sizes with calc.
Module 2: Boxes, text and decoration
How every element takes up space, how to make text comfortable to read, and how to add colour, depth and shape with a few lines of CSS.
- 1
The box model
Every element is a box made of content, padding, border and margin. Learn how sizes are calculated, why margins collapse, and how to centre a block.
- 2
Text and fonts
Choose font stacks, load web fonts without blocking the page, and set line height, line length and spacing so that long text is pleasant to read.
- 3
Backgrounds, borders and shadows
Use colours, images and gradients as backgrounds, then round corners and add shadows to give flat boxes a sense of depth.
Module 3: Layout
Normal flow, then the tools that override it. Flexbox for lines of content, grid for rows and columns together, and positioning for the things that must step outside.
- 1
Display and normal flow
How block and inline elements fill a page by default, how the display property changes that, the three ways of hiding things, and what floats are still good for.
- 2
Flexbox: laying things out in a line
Arrange items along a row or column, share out space, centre anything, and let items wrap, using the main and cross axes.
- 3
Grid: laying things out in two dimensions
Define rows and columns, place items across them, build whole page layouts with named areas, and create responsive card grids with no media queries.
- 4
Positioning and stacking
Take elements out of the normal flow to place badges, sticky headers and overlays, and understand why z-index sometimes seems to do nothing.
Module 4: Modern, adaptive CSS
Styles that respond to state and to the device, values that are shared through variables, motion that respects people, and habits that keep a stylesheet healthy as it grows.
- 1
Pseudo-classes and pseudo-elements Intermediate
Style elements by their state and position, such as hover, focus and every second row, and add decorative content without touching the HTML.
- 2
Custom properties (CSS variables) Intermediate
Store values in one place, understand how variables inherit and can be overridden in a section of the page, and build a theme that switches instantly.
- 3
Responsive design basics Intermediate
Make one page work on every screen with the viewport tag, fluid images, mobile-first media queries and sizes that scale smoothly.
- 4
Transitions, transforms and animations Intermediate
Move and fade elements smoothly, understand which properties are cheap to animate, and make sure motion never harms the people using your page.
- 5
Keeping CSS maintainable Advanced
A sensible reset, class naming that scales, cascade layers for controlling order, nesting, and how to debug styles with your browser's own tools.
Projects
- A responsive landing page Take a small, plain HTML page for a product of your choice, and style it into a complete landing page that works on a phone and on a large screen.
- An admin dashboard layout Build the layout of a dashboard, with a sidebar, a header and a grid of cards, and an overlay that dims the page, using only HTML and CSS.
What to learn next
- JavaScript: Programming for the Web From your first program to closures, async code and modules, with every variable and call visible, then real pages that respond, load data and remember it.