This course breaks down the fundamentals of CSS into clear, digestible pieces.
Over the next few modules, you'll learn how the core aspects of CSS work and how
to use them effectively in your projects. Use the menu pane by the "Learn CSS"
logo to navigate the modules.

You'll learn CSS fundamentals like the box model, cascade and specificity,
flexbox, grid, and z-index. You'll also learn about functions, color types,
gradients, logical properties and inheritance to make you a well-rounded
frontend developer, ready to take on any user interface.

Each module is full of interactive demos and self-assessments for you to test
your knowledge. In addition to learning through reading and demos, there's a
podcast episode accompanying each topic as another way to learn and continue
expanding your knowledge.

This course is created for both beginner and advanced CSS developers. You can go
through the series from start to finish to get a general understanding of CSS
from top to bottom, or you can use it as a reference for specific styling
subjects. For those new to web development overall, check out
[Learn HTML](https://web.dev/learn/html.md.txt) to learn about how to write markup and link your
stylesheets.

Here's what you'll learn:

### [Box Model](https://web.dev/learn/css/box-model.md.txt)

Because everything CSS displays is a box, understanding how the CSS Box Model
works is a core foundation of CSS.

### [Selectors](https://web.dev/learn/css/selectors.md.txt)

To apply CSS to an element, you need to select it. CSS gives you a number of
different ways to do this, and you can explore them in this module.

### [Nesting](https://web.dev/learn/css/nesting.md.txt)

Nesting CSS style rules can make your stylesheets more organized, easier to
read, and more maintainable.

### [The cascade](https://web.dev/learn/css/the-cascade.md.txt)

Sometimes two or more competing CSS rules can apply to an element. Find out
how the browser chooses which to use, and how to control this selection.

### [Specificity](https://web.dev/learn/css/specificity.md.txt)

This module takes a deeper look at specificity, a key part of the cascade.

### [Inheritance](https://web.dev/learn/css/inheritance.md.txt)

Some CSS properties inherit if you don't specify a value for them. Find out
how this works and how to use it to your advantage in this module.

### [Color](https://web.dev/learn/css/color.md.txt)

There are several different ways to specify color in CSS. This module
examines the most commonly used color values.

### [Sizing Units](https://web.dev/learn/css/sizing.md.txt)

Find out how to size elements using CSS, working with the flexible medium of
the web.

### [Layout](https://web.dev/learn/css/layout.md.txt)

An overview of the various layout methods you have to choose from when
building a component or page layout.

### [Flexbox](https://web.dev/learn/css/flexbox.md.txt)

Flexbox is a layout mechanism designed for laying out groups of items in one
dimension. Learn how to use it in this module.

### [Grid](https://web.dev/learn/css/grid.md.txt)

CSS Grid Layout provides a two dimensional layout system, controlling layout
in rows and columns. Discover everything the grid has to offer.

### [Logical Properties](https://web.dev/learn/css/logical-properties.md.txt)

Logical, flow-relative properties and values are linked to the flow of text,
not the physical shape of the screen. Learn how to take advantage of this
newer approach to CSS.

### [Custom Properties](https://web.dev/learn/css/custom-properties.md.txt)

Custom properties, or CSS variables, allow you to organize and reuse values
in your CSS, so that your styles are more flexible and easier to
understand.

### [Spacing](https://web.dev/learn/css/spacing.md.txt)

Find out how to select the best method of spacing elements for the layout
method you're using and the component you're building.

### [Pseudo-elements](https://web.dev/learn/css/pseudo-elements.md.txt)

A pseudo-element is like adding or targeting an extra element without having
to add more HTML. They have a variety of roles, and you can learn about them
in this module.

### [Pseudo-classes](https://web.dev/learn/css/pseudo-classes.md.txt)

Pseudo-classes let you apply CSS based on state changes. This means your
design can react to user input, such as an invalid email address.

### [Borders](https://web.dev/learn/css/borders.md.txt)

A border provides a frame for your boxes. Find out how to change the size,
style, and color of borders using CSS.

### [Shadows](https://web.dev/learn/css/shadows.md.txt)

There are a number of ways to add shadows to text and elements in CSS.
Learn how to use each option, and the tasks they were designed for.

### [Focus](https://web.dev/learn/css/focus.md.txt)

Understand the importance of focus in your web applications. You'll learn
how to manage focus, and how to make sure the path through your page works for
both people using a mouse and people using the keyboard to navigate.

### [Cursors and pointers](https://web.dev/learn/css/cursors-and-pointers.md.txt)

The cursor is an essential way for your users to know what they are
interacting with. In this module, learn how you can style cursors in specific
circumstances.

### [Z-index and stacking contexts](https://web.dev/learn/css/z-index.md.txt)

Find out how to control the order in which elements layer on top of each
other by using z-index and the stacking context.

### [Anchor positioning](https://web.dev/learn/css/anchor-positioning.md.txt)

CSS anchor positioning provides a way to declaratively position an element
relative to another element.

### [Popover and dialog](https://web.dev/learn/css/popover-and-dialog.md.txt)

A popover is any element with a popover attribute, and is useful for a wide
range of interactive patterns, including tooltips, alerts, toasts and
more.

### [Functions](https://web.dev/learn/css/functions.md.txt)

CSS has a range of inbuilt functions. Learn about some of the key functions
and how to use them.

### [Paths, shapes, clipping, and masking](https://web.dev/learn/css/paths-shapes-clipping-masking.md.txt)

Paths, shapes, clipping, and masking give developers the ability to render
complex shapes in CSS through a variety of functions that can create
memorable experiences for your users.

### [Gradients](https://web.dev/learn/css/gradients.md.txt)

In this module, you'll find out how to use the various types of gradients
available in CSS. Gradients can create a whole host of useful effects, without
the need for graphics apps to create images.

### [Animations](https://web.dev/learn/css/animations.md.txt)

Animation is a great way to highlight interactive elements, and add interest
and fun to your designs. Find out how to add and control animation effects
with CSS.

### [Filters](https://web.dev/learn/css/filters.md.txt)

Filters in CSS mean you can apply effects you might only think were possible
in a graphics application. In this module, you can discover what is available.

### [Blend Modes](https://web.dev/learn/css/blend-modes.md.txt)

Create compositional effects by mixing two or more layers, and learn how to
isolate an image with a white background in this module on blend modes.

### [Lists](https://web.dev/learn/css/lists.md.txt)

A list, structurally, is composed of a list container element filled with
list items. In this module, you'll learn how to style all the parts of a
list.

### [Counters](https://web.dev/learn/css/counters.md.txt)

CSS provides several ways to control the counters in a list for different use
cases. In this module, you'll learn how to control the counters in a
list.

### [Transitions](https://web.dev/learn/css/transitions.md.txt)

Learn how to define transitions between states of an element. Use transitions
to improve user experience by providing visual feedback for user interaction.

### [View Transitions for SPAs](https://web.dev/learn/css/view-transitions-spas.md.txt)

View Transitions give you a way to show continuity or context between the
pages in your SPA.

### [Overflow](https://web.dev/learn/css/overflow.md.txt)

Overflow is how you deal with content that doesn't fit in a set parent size.
In this module, you'll think outside the box and learn how to style
overflowing content.

### [Backgrounds](https://web.dev/learn/css/backgrounds.md.txt)

Learn how to style boxes' backgrounds using CSS.

### [Text and typography](https://web.dev/learn/css/typography.md.txt)

Learn how to style text on the web.

### [Container queries](https://web.dev/learn/css/container-queries.md.txt)

Unlike media queries, container queries allow you to make more specific
adjustments to elements based on the size and state of their ancestors,
or containers.

### [Conclusion and next steps](https://web.dev/learn/css/conclusion.md.txt)

Further resources to help you take your next steps.

So, are you ready to learn CSS? [Let's get started](https://web.dev/learn/css/box-model.md.txt).

> [!NOTE]
> **Note:** This course is written and edited by CSS community experts: [Andy Bell](https://twitter.com/piccalilli_), [Rachel Andrew](https://twitter.com/rachelandrew), [Una Kravets](https://twitter.com/Una), [Adam Argyle](https://twitter.com/argyleink), [Emma Twersky](https://twitter.com/twerske), [Camden Bickel](https://twitter.com/camdenbickel), and [Kevin Lozandier](https://twitter.com/KevinLozandier). [Rob Dodson](https://twitter.com/rob_dodson) and [Jiwoong Lee](https://twitter.com/jiwoong) shepherded the UX and production build, along with help from [Ewa Gasperowicz](https://twitter.com/devnook) and [Kayce Basques](https://twitter.com/kaycebasques). Updates and new modules added in 2025 have been authored by [OddBird](https://www.oddbird.net/), with editing and production by [Jeremy Wagner](https://jlwagner.net/).