https://web.dev/learn/css/ Skip to main Open menu Close 000 Learn CSS 001 Box Model 002 Selectors 003 The cascade 004 Specificity 005 Inheritance 006 Color 007 Sizing Units 008 Layout 009 Flexbox 010 Grid 011 Logical Properties 012 Spacing 013 Pseudo-elements 014 Pseudo-classes 015 Borders 016 Shadows 017 Focus 018 Z-index and stacking contexts 019 Functions 020 Gradients 021 Animations 022 Filters 023 Blend Modes 024 Conclusion and next steps * * Learn * Learn CSS! Share On this page * Welcome to Learn CSS! 000 Learn CSS An evergreen CSS course and reference to level up your web styling expertise. On this page * Welcome to Learn CSS! Welcome to Learn CSS! # This course breaks down the fundamentals of CSS into digestible, easy to understand 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. And, along with these fundamentals, you'll learn about functions, color types, gradients, logical properties and inheritance to make you a well-rounded front-end 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 is an accompanying podcast episode for each topic as another way to learn and continue expanding your knowledge. This course is created for beginner and advanced CSS developers alike. 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 the intro to HTML course from MDN to learn all about how to write markup and link your stylesheets. Here's what you'll learn: Box Model Everything displayed by CSS is a box. Understanding how the CSS Box Model works is therefore a core foundation of CSS. Selectors 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. The cascade 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. Specificity This module takes a deeper look at specificity, a key part of the cascade. Inheritance 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 There are several different ways to specify color in CSS. In this module we take a look at the most commonly used color values. Sizing Units In this module find out how to size elements using CSS, working with the flexible medium of the web. Layout An overview of the various layout methods you have to choose from when building a component or page layout. Flexbox Flexbox is a layout mechanism designed for laying out groups of items in one dimension. Learn how to use it in this module. Grid CSS Grid Layout provides a two dimensional layout system, controlling layout in rows and columns. In this module discover everything grid has to offer. Logical Properties 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. Spacing 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. Pseudo-elements 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 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. Borders 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. Shadows 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. Focus 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. Z-index and stacking contexts 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. Functions 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. Gradients 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. Animations 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. Filters 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. Blend Modes 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. Conclusion and next steps Further resources to help you take your next steps. So, are you ready to learn CSS? Let's get started. This course is written and edited by CSS community experts: Andy Bell , Rachel Andrew, Una Kravets, and Adam Argyle. Rob Dodson and Jiwoong Lee shepherded the UX & production build, along with help from Ewa Gasperowicz and Kayce Basques. Next 001 Box Model Everything displayed by CSS is a box. Understanding how the CSS Box Model works is therefore a core foundation of CSS. * Contribute + File a bug + View source * Related content + Updates + Web Fundamentals + Case studies + DevWeb Content Firehose + Podcasts * Connect + Twitter + YouTube Google Developers * Chrome * Firebase * Google Cloud Platform * All products * Terms & Privacy * Community Guidelines Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.