Learn CSS  |  web.dev Skip to main content Resources Web Platform Dive into the web platform, at your pace. HTML CSS JavaScript User experience Learn how to build better user experiences. Performance Accessibility Identity Learn Get up to speed on web development. Learn HTML Learn CSS Learn JavaScript Learn AI Learn Performance Learn Accessibility More courses Additional resources Explore content collections, patterns, and more. AI and the web Explore PageSpeed Insights Patterns Podcasts & shows Developer Newsletter About web.dev Discover Baseline How to use Baseline Blog Case Studies / English Español Português Русский 한국어 Sign in Resources AI Privacy Accessibility HTML Images Responsive Design Forms PWA CSS Performance Testing JavaScript Resources More AI Privacy Accessibility HTML Images Responsive Design Forms PWA CSS Performance Testing JavaScript Discover Baseline How to use Baseline Blog Case Studies Web Platform HTML CSS JavaScript User experience Performance Accessibility Identity Learn Learn HTML Learn CSS Learn JavaScript Learn AI Learn Performance Learn Accessibility More courses Additional resources AI and the web Explore PageSpeed Insights Patterns Podcasts & shows Developer Newsletter About web.dev We want to hear from you! We are looking for web developers to participate in user research, product testing, discussion groups and more. Apply now to join our WebDev Insights Community. web.dev Resources CSS Stay organized with collections Save and categorize content based on your preferences. Learn CSS An evergreen CSS course and reference to level up your web styling expertise. Go back   check_circle Welcome to Learn CSS! keyboard_arrow_down keyboard_arrow_up subject Article An evergreen CSS course and reference to level up your web styling expertise. Read article check_circle Box Model keyboard_arrow_down keyboard_arrow_up subject Article Everything displayed by CSS is a box. Understanding how the CSS Box Model works is therefore a core foundation of CSS. Read article check_circle Selectors keyboard_arrow_down keyboard_arrow_up subject Article To apply CSS to an element you need to select it. CSS provides you with a number of different ways to do this, and you can explore them in this module. Read article check_circle Nesting keyboard_arrow_down keyboard_arrow_up subject Article Nesting CSS style rules can make your stylesheets more organized, easier to read, and more maintainable. Read article check_circle The cascade keyboard_arrow_down keyboard_arrow_up subject Article Sometimes two or more competing CSS rules could apply to an element. In this module find out how the browser chooses which to use, and how to control this selection. Read article check_circle Specificity keyboard_arrow_down keyboard_arrow_up subject Article This module takes a deeper look at specificity, a key part of the cascade. Read article check_circle Inheritance keyboard_arrow_down keyboard_arrow_up subject Article 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. Read article check_circle Color keyboard_arrow_down keyboard_arrow_up subject Article There are several different ways to specify color in CSS. In this module we take a look at the most commonly used color values. Read article check_circle Sizing Units keyboard_arrow_down keyboard_arrow_up subject Article In this module find out how to size elements using CSS, working with the flexible medium of the web. Read article check_circle Layout keyboard_arrow_down keyboard_arrow_up subject Article An overview of the various layout methods you have to choose from when building a component or page layout. Read article check_circle Flexbox keyboard_arrow_down keyboard_arrow_up subject Article Flexbox is a layout mechanism designed for laying out groups of items in one dimension. Learn how to use it in this module. Read article check_circle Grid keyboard_arrow_down keyboard_arrow_up subject Article CSS Grid Layout provides a two dimensional layout system, controlling layout in rows and columns. In this module discover everything grid has to offer. Read article check_circle Logical Properties keyboard_arrow_down keyboard_arrow_up subject Article Logical, flow relative properties and values are linked to the flow of text, rather than the physical shape of the screen. Learn how to take advantage of this newer approach to CSS. Read article check_circle Custom Properties keyboard_arrow_down keyboard_arrow_up subject Article 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. Read article check_circle Spacing keyboard_arrow_down keyboard_arrow_up subject Article Find out how to select the best method of spacing elements, taking into consideration the layout method you are using and component that you need to build. Read article check_circle Pseudo-elements keyboard_arrow_down keyboard_arrow_up subject Article 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. Read article check_circle Pseudo-classes keyboard_arrow_down keyboard_arrow_up subject Article Pseudo-classes let you apply CSS based on state changes. This means that your design can react to user input such as an invalid email address. Read article check_circle Borders keyboard_arrow_down keyboard_arrow_up subject Article A border provides a frame for your boxes. In this module find out how to change the size, style and color of borders using CSS. Read article check_circle Shadows keyboard_arrow_down keyboard_arrow_up subject Article There are a number of ways to add shadows to text and elements in CSS. In this module you'll learn how to use each option, and the tasks they were designed for. Read article check_circle Focus keyboard_arrow_down keyboard_arrow_up subject Article Understand the importance of focus in your web applications. You'll find out how to manage focus, and how to make sure the path through your page works for people using a mouse, and those using the keyboard to navigate. Read article check_circle Cursors and pointers keyboard_arrow_down keyboard_arrow_up subject Article 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. Read article check_circle Z-index and stacking contexts keyboard_arrow_down keyboard_arrow_up subject Article In this module find out how to control the order in which things layer on top of each other, by using z-index and the stacking context. Read article check_circle Anchor positioning keyboard_arrow_down keyboard_arrow_up subject Article CSS anchor positioning provides a way to declaratively position an element relative to another element. Read article check_circle Popover and dialog keyboard_arrow_down keyboard_arrow_up subject Article 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. Read article check_circle Functions keyboard_arrow_down keyboard_arrow_up subject Article CSS has a range of inbuilt functions. In this module you will find out about some of the key functions, and how to use them. Read article check_circle Paths, shapes, clipping, and masking keyboard_arrow_down keyboard_arrow_up subject Article 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. Read article check_circle Gradients keyboard_arrow_down keyboard_arrow_up subject Article In this module you will find out how to use the various types of gradients available in CSS. Gradients can be used to create a whole host of useful effects, without needing to create an image using a graphics application. Read article check_circle Animations keyboard_arrow_down keyboard_arrow_up subject Article Animation is a great way to highlight interactive elements, and add interest and fun to your designs. In this module find out how to add and control animation effects with CSS. Read article check_circle Filters keyboard_arrow_down keyboard_arrow_up subject Article Filters in CSS mean that you can apply effects you might only think possible in a graphics application. In this module, you can discover what is available. Read article check_circle Blend Modes keyboard_arrow_down keyboard_arrow_up subject Article 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. Read article check_circle Lists keyboard_arrow_down keyboard_arrow_up subject Article 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. Read article check_circle Counters keyboard_arrow_down keyboard_arrow_up subject Article 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. Read article check_circle Transitions keyboard_arrow_down keyboard_arrow_up subject Article In this module, learn how to define transitions between states of an element. Use transitions to improve user experience by providing visual feedback to user interaction. Read article check_circle View Transitions for SPAs keyboard_arrow_down keyboard_arrow_up subject Article View Transitions give you a way to show continuity or context between the pages in your SPA. Read article check_circle Overflow keyboard_arrow_down keyboard_arrow_up subject Article 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. Read article check_circle Backgrounds keyboard_arrow_down keyboard_arrow_up subject Article In this module learn the ways you can style backgrounds of boxes using CSS. Read article check_circle Text and typography keyboard_arrow_down keyboard_arrow_up subject Article In this module, learn how to style text on the web. Read article check_circle Container queries keyboard_arrow_down keyboard_arrow_up subject Article 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. Read article check_circle Conclusion and next steps keyboard_arrow_down keyboard_arrow_up subject Article Further resources to help you take your next steps. Read article CSS quiz Take a quiz, earn a badge. Correctly answer CSS questions to earn your Learn CSS badge. Take the quiz [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],[],[],[]] web.dev web.dev We want to help you build beautiful, accessible, fast, and secure websites that work cross-browser, and for all of your users. This site is our home for content to help you on that journey, written by members of the Chrome team, and external experts. Contribute File a bug See open issues Related Content Chrome for Developers Chromium updates Case studies Podcasts & shows Follow @ChromiumDev on X YouTube Chrome for Developers on LinkedIn RSS Terms Privacy Manage cookies English Español Português Русский 한국어