Learning Paths / Learn CSS

css
beginner
7h estimated

Learn CSS

Style modern websites with the box model, flexbox, grid, custom properties, transitions, and animations.

Start learning →

Fundamentals

  1. 1

    Selectors

    Target elements with type, class, attribute, and pseudo selectors

  2. 2

    Box Model

    Content, padding, border, margin, and box-sizing behavior

  3. 3

    Specificity

    How the cascade resolves conflicting rules using specificity scoring

Layout

  1. 1

    Positioning

    Control element placement with static, relative, absolute, fixed, and sticky positioning

  2. 2

    Flexbox

    One-dimensional layouts with flex containers and items

  3. 3

    Grid

    Two-dimensional layouts with rows, columns, and named areas

Responsive Design

  1. 1

    Responsive Design

    Adapt layouts to screen size with media queries and fluid units

  2. 2

    Container Queries

    Style components based on their container's size rather than the viewport

Dynamic Styling

  1. 1

    Custom Properties

    Define reusable theme variables with CSS custom properties

  2. 2

    Transitions

    Animate property changes smoothly between two states

  3. 3

    Transforms

    Translate, rotate, scale, and skew elements in 2D and 3D

  4. 4

    Animations

    Create keyframe-based animations that run automatically and loop