Lesson 1: Overview

This course breaks down the fundamentals of CSS into clear parts. We will explore how the core aspects of CSS work and how to use them in your projects. Use the menu pane next to the logo to navigate the lessons.

We will cover fundamentals like the box model, cascade, flexbox, and grid. We also cover colors, gradients, and custom properties to help you build any user interface.

This course is built for both new and experienced developers. You can read it start to finish or just use it as a quick reference. If you are completely new to the web, you should check out the HTML course first to learn how to write markup.

Here is what we cover.

Box model#

CSS displays everything as a box. Understanding how the box model works is the foundation for everything else.

Selectors#

You need to select elements to style them. CSS gives you plenty of ways to target the right elements.

Nesting#

Nesting your CSS rules keeps stylesheets organized. It makes your code easier to read and maintain.

The cascade#

Sometimes multiple CSS rules target the same element. The browser has a system to choose which style wins.

Specificity#

We take a deeper look at specificity. it’s the key algorithm behind the cascade.

Inheritance#

Some CSS properties pass down to child elements automatically. Learn how this works and how to use it to write less code.

Color#

CSS has many different formats to define colors. We will look at the most common options and how they work.

Sizing units#

Learn how to size elements on the web. We cover relative and absolute units to make layouts flexible.

Layout#

An overview of different layout methods. You can choose the right one for your pages and components.

Flexbox#

Flexbox is built for one-dimensional layouts. It makes aligning items in a row or column straightforward.

Grid#

CSS Grid gives you a two-dimensional layout system. It lets you control rows and columns at the same time.

Logical properties#

Logical properties tie styles to text flow instead of physical screen edges. This is important for multi-language layouts.

Custom properties#

CSS variables let you reuse values. They make your stylesheets flexible and easy to update.

Spacing#

Learn how to space out your elements. We will look at margins, padding, and gap settings.

Pseudo-elements#

Pseudo-elements let you style specific parts of an element without adding HTML markup. They are useful for decorative additions.

Pseudo-classes#

Apply styles based on state changes. You can style elements when users hover over them or type invalid text.

Borders#

Borders frame your elements. Learn how to style their size, color, and style.

Shadows#

You can add shadows to text and elements. Learn the different properties and how to use them.

Focus#

Focus management is critical for accessibility. Learn how to make your page navigable for keyboard users.

Cursors and pointers#

Cursors show users what they can interact with. We cover how to change the mouse pointer for different elements.

Z-index and stacking contexts#

Control the vertical layering of elements. We explain z-index and how stacking contexts are created.

Anchor positioning#

Position elements relative to other anchor elements. This is great for tooltips and menus.

Popover and dialog#

Create interactive overlays easily. Popovers and dialogs are perfect for alerts and modals.

Functions#

CSS has many built-in math and sizing functions. We look at the key functions you will use daily.

Paths, shapes, clipping, and masking#

Render complex shapes directly in CSS. Clipping and masking help you create custom visual layouts.

Gradients#

Learn to use CSS gradients. They let you build complex color transitions without heavy image files.

Animations#

Add movement to your designs. Learn how to control keyframe animations to guide user attention.

Filters#

Apply visual effects like blur and brightness. CSS filters let you edit graphics directly in the browser.

Blend modes#

Mix overlapping layers together. Learn how blend modes work to combine images and colors.

Lists#

Style list items and list containers. We will customize bullet points and list spacing.

Counters#

Track numbers inside your CSS. Counters are great for styling complex document lists.

Transitions#

Smooth out state changes. Transitions provide visual feedback when properties change.

View transitions for SPAs#

Add page transitions to single-page applications. This creates a smooth flow between screens.

Overflow#

Handle content that is too big for its container. Learn to style scrollbars and hide overflow.

Backgrounds#

Style background colors and images. We cover positioning and sizing backgrounds.

Text and typography#

Format text for readability. We look at font families, sizes, and line heights.

Container queries#

Responsive styles based on parent size instead of screen size. This makes component design much easier.

Conclusion and next steps#

Where to find more CSS resources to keep learning.

Are you ready to learn CSS? Let us get started.

Adapted from Learn CSS © Google and contributors, licensed under CC BY 4.0 (prose) and Apache 2.0 (code samples).