Build a clearer understanding of how websites look and behave with Learn CSS, Google’s free web styling course on web.dev. It takes the everyday problems of front-end development—spacing, layout, competing style rules and interactive states—and explains the CSS concepts behind them through readable lessons and demonstrations.
If you can write a basic HTML page but often adjust styles by trial and error, this course gives you a more deliberate approach. Follow the modules from the beginning, or return to a topic when a layout problem appears in your own work. The material also serves as a reference you can keep using as your projects grow.
Course at a glance
| Provider | |
|---|---|
| Platform | web.dev |
| Level | Beginner |
| Language | English |
| Format | Self-paced reading course with demonstrations and knowledge checks |
| Access | Free public lessons; practise locally with a browser and text editor |
| Recognition | The CSS quiz offers a Learn CSS developer badge |
| Accounts | No account needed to read; use a free developer profile to collect a badge |
What you’ll learn
- Understand element sizing: use the box model, spacing and sizing units to reason about how content fits on a page.
- Make style rules predictable: work with selectors, the cascade, specificity and inheritance when several rules affect an element.
- Choose a layout method: explore Flexbox for one-dimensional arrangements and Grid for layouts with rows and columns.
- Create a consistent visual system: use colours, typography, backgrounds and custom properties to organise reusable styling decisions.
- Style useful interactions: work with focus states, pseudo-classes, transitions and animations while considering usability.
- Explore newer CSS capabilities: the course includes topics such as nesting, container queries and anchor positioning.
Skills you’ll gain
- CSS fundamentals
- Selectors and specificity
- Flexbox and Grid
- Typography and spacing
- Reusable style values
- Keyboard focus styling
Understand the rule behind the result
A useful part of learning CSS is being able to explain why a browser chose a particular result. The cascade lesson examines competing declarations, helping you investigate a style that appears to be ignored. The Grid lesson then shows how rows, columns, placement and gaps can work together to organise a page.
These are connected skills. A component can have a carefully planned layout and still behave unexpectedly if another rule changes its sizing or appearance. Studying the underlying mechanisms gives you a starting point for diagnosis: inspect the affected element, identify the winning declaration and test a focused change.
The course also treats focus as part of interface design. A visible focus state helps someone using a keyboard understand which control they are about to activate. That is a practical reminder to evaluate a page by using it, as well as by looking at a screenshot.
Turn the lessons into a small page
For independent practice, create a simple resource page with a heading, a short introduction and three cards. Keep the HTML readable, then add your styling in a separate file. Use one shared colour value, a consistent spacing scale and a layout that remains usable when the browser narrows.
After studying the layout modules, compare a Flexbox version with a Grid version. Then navigate the page with the keyboard and inspect the focus indicator on each link. Write down why you chose a layout or changed a rule. This is an optional practice idea you can adapt to your interests; it is not an advertised provider assessment.
Who this course suits
Learn CSS welcomes newcomers and developers revisiting specific styling topics. Basic HTML familiarity makes the examples easier to use. If markup and linking a stylesheet are unfamiliar, start with web.dev’s Learn HTML material before tackling the CSS sequence.
Beginners can follow the modules in order, pausing to reproduce the demonstrations. More experienced learners can use the course as a reference. No fixed completion time is promised here: your pace will depend on which topics you cover and how much practice you add.
Free learning and the optional badge
The lessons and examples are publicly accessible without signing in. You can practise by opening your own HTML and CSS files in a browser, using a plain-text editor already available on your computer. This local route does not require paid hosting, a software subscription or a trial.
The course advertises a Learn CSS badge for correctly answering its CSS quiz. Collecting developer badges uses a Google developer profile, and standard membership is free. Treat the badge as a record of learning; this course article does not promise academic credit or professional accreditation.
Frequently asked questions
Do I need JavaScript before learning CSS?
JavaScript is not listed as an entry requirement. Familiarity with HTML and linking a stylesheet is the more relevant starting point.
Can I use it to refresh an existing skill?
Yes. The course is designed for sequential learning and for looking up individual CSS topics when you need them.
Does the course require paid design software?
No paid design application is needed for the advertised CSS reading and local coding route. A browser and plain-text editor are sufficient for practising the examples.
Questions & discussion
Share a useful question or correction. Comments appear after moderation. Please avoid personal or sensitive information.