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 to learn about how to write markup and link your stylesheets.
Here's what you'll learn:
Box Model
Because everything CSS displays is a box, understanding how the CSS Box Model works is a core foundation of CSS.
Selectors
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.
The cascade
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
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. This module examines the most commonly used color values.
Sizing Units
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. Discover everything the grid has to offer.
Logical Properties
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.
Spacing
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
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 your design can react to user input, such as an invalid email address.
Borders
A border provides a frame for your boxes. 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. 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 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.
Z-index and stacking contexts
Find out how to control the order in which elements layer on top of each other by using z-index and the stacking context.
Functions
CSS has a range of inbuilt functions. Learn about some of the key functions and how to use them.
Gradients
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
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
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
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
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.
Transitions
Learn how to define transitions between states of an element. Use transitions to improve user experience by providing visual feedback for user interaction.
Overflow
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
Learn how to style boxes' backgrounds using CSS.
Text and typography
Learn how to style text on the web.
Conclusion and next steps
Further resources to help you take your next steps.
So, are you ready to learn CSS? Let's get started.