CSS (Cascading Style Sheets)

Learn to style and design websites.

CSS styles the appearance of web pages. It controls colours, spacing, layout, fonts, animations, and how pages adjust across screen sizes. If HTML provides the structure, CSS adds the visual design.

This page provides a clear path to learning CSS, from core concepts to modern layout systems. All links lead to free, accessible learning.

Start Learning CSS

Build a strong foundation before moving to complex layouts.

CSS Basics

A beginner-friendly guide covering what CSS is, how it works, and the essentials: rules, properties, values, colours, units, the box model, and simple layout ideas.

CSS Selectors

Selectors control which elements CSS styles apply to. Covers element, class, ID, attribute selectors, pseudo-classes, pseudo-elements, combinators, and specificity.

CSS Layout

An overview of layout fundamentals: the box model, display types, floats, positioning, stacking, and how CSS handles page flow.


Modern CSS Techniques

CSS Flexbox

A layout system for aligning and spacing items. Includes container and item properties, common patterns, and troubleshooting.

CSS Grid

A powerful layout system for building grids and structured page designs. Covers rows, columns, gaps, and grid areas.

Responsive Design

How to make pages work on mobiles, tablets and desktops. Includes media queries, responsive units, breakpoints, and fluid typography.


CSS Resources

CSS Tutorials

A curated list of free beginner and intermediate tutorials.

CSS Video Tutorials

Free video lessons covering core concepts, layout systems and animations.

CSS Syntax

A quick reference for rule structure, properties, values and formatting.


Next Steps

Further topics you can explore once you are comfortable with the fundamentals:

CSS Tools – Colour tools, generators and online playgrounds.

CSS Variables – Reusable values for maintainable design.

CSS Animations – Transitions, transforms and keyframes.

CSS Best Practices – Naming conventions, BEM, formatting.

CSS Debugging – Using DevTools and fixing common issues.