# CSS in Depth

Make web pages that look designed: how CSS decides which rule wins, layouts with flexbox and grid, pages that work on every screen, design tokens, light and…

Updated: November 10, 2026

## [Module 1: Your First Styled Page](https://www.ask-codey.com/courses/css-in-depth/modules/1)

What CSS can do and the tools to write it, the little HTML a stylesheet needs, and your first styled pages: selectors, color, fonts, the box model and units, then putting a page online.

- [Welcome to CSS](https://www.ask-codey.com/courses/css-in-depth/chapters/css-welcome-to-css) (3 topics, 7 lessons)
- [The HTML You Need](https://www.ask-codey.com/courses/css-in-depth/chapters/css-the-html-you-need) (3 topics, 5 lessons)
- [Selectors, Color and Text](https://www.ask-codey.com/courses/css-in-depth/chapters/css-selectors-color-and-text) (4 topics, 6 lessons)
- [The Box Model and Units](https://www.ask-codey.com/courses/css-in-depth/chapters/css-box-model-and-units) (4 topics, 6 lessons)

## [Module 2: The Cascade and Selectors](https://www.ask-codey.com/courses/css-in-depth/modules/2)

Why one rule wins over another (the cascade, specificity and inheritance), selectors that reach exactly the right element (combinators, attribute selectors, pseudo-classes, pseudo-elements, :is(), :where() and :has()), and keeping rules in order with resets, nesting and cascade layers.

- [Why a Rule Wins](https://www.ask-codey.com/courses/css-in-depth/chapters/css-why-a-rule-wins) (3 topics, 4 lessons)
- [Selectors in Depth](https://www.ask-codey.com/courses/css-in-depth/chapters/css-selectors-in-depth) (3 topics, 6 lessons)
- [Organizing Your Rules](https://www.ask-codey.com/courses/css-in-depth/chapters/css-organizing-your-rules) (4 topics, 4 lessons)

## [Module 3: Layout](https://www.ask-codey.com/courses/css-in-depth/modules/3)

Normal flow and positioning, flexbox in depth (alignment, sizing, wrapping), CSS Grid in depth (lines, named areas, auto-fit, subgrid), and how to choose between them.

- [Flow and Positioning](https://www.ask-codey.com/courses/css-in-depth/chapters/css-flow-and-positioning) (3 topics, 5 lessons)
- [Flexbox](https://www.ask-codey.com/courses/css-in-depth/chapters/css-flexbox) (3 topics, 5 lessons)
- [CSS Grid](https://www.ask-codey.com/courses/css-in-depth/chapters/css-grid-layout) (4 topics, 6 lessons)

## [Module 4: Responsive Design](https://www.ask-codey.com/courses/css-in-depth/modules/4)

Pages that work from a phone to a wide screen: the viewport, media queries and breakpoints, mobile first, responsive images, math in CSS with calc(), min(), max() and clamp(), and container queries.

- [Mobile First and Media Queries](https://www.ask-codey.com/courses/css-in-depth/chapters/css-mobile-first-and-media-queries) (3 topics, 5 lessons)
- [Fluid and Container-Based Layouts](https://www.ask-codey.com/courses/css-in-depth/chapters/css-fluid-and-container-layouts) (3 topics, 4 lessons)

## [Module 5: Design with CSS](https://www.ask-codey.com/courses/css-in-depth/modules/5)

Design basics for developers (hierarchy, alignment, whitespace, type and color with good contrast), finishing touches, custom properties and design tokens, light and dark themes, and motion with transitions, transforms and keyframe animations that respect reduced-motion settings.

- [Design Basics for Developers](https://www.ask-codey.com/courses/css-in-depth/chapters/css-design-basics-for-developers) (3 topics, 5 lessons)
- [Custom Properties and Themes](https://www.ask-codey.com/courses/css-in-depth/chapters/css-custom-properties-and-themes) (3 topics, 4 lessons)
- [Motion](https://www.ask-codey.com/courses/css-in-depth/chapters/css-motion) (3 topics, 5 lessons)

## [Module 6: CSS at Scale](https://www.ask-codey.com/courses/css-in-depth/modules/6)

CSS on a real team: naming with BEM, utility classes, what Bootstrap and Tailwind give you and cost you, debugging layouts with the developer tools, the common layout bugs, browser support, and what makes CSS slow.

- [Organizing Stylesheets](https://www.ask-codey.com/courses/css-in-depth/chapters/css-organizing-stylesheets) (3 topics, 4 lessons)
- [Debugging and Performance](https://www.ask-codey.com/courses/css-in-depth/chapters/css-debugging-and-performance) (3 topics, 5 lessons)

Source: https://www.ask-codey.com/courses/css-in-depth