Learn CSS Roadmap

A complete guide to mastering CSS, structured from basics to advanced techniques.

Your progress

0 of 48 topics completed

0% complete

Fundamentals0/7

CSS Selectors

Learn how to select and style HTML elements.

Start Learning

CSS Comments

Understand how to add comments to your CSS code.

Start Learning

CSS Colors

Explore ways to specify colors: Names, RGB, HEX, HSL.

Start Learning

CSS Units

Understand relative (em, rem, %) vs absolute (px) units.

Start Learning

CSS Inheritance

How properties trickle down from parents to children.

Start Learning

CSS Specificity

The rules browsers use to decide which style applies.

Start Learning

CSS !important

The nuclear option for overriding styles.

Start Learning

Box Model & Layout0/15

CSS Box Model

The foundation of layout: Content, Padding, Border, Margin.

Start Learning

CSS Borders

Style the edge of your elements.

Start Learning

CSS Margins

Create spacing between elements.

Start Learning

CSS Padding

Create breathing room inside elements.

Start Learning

CSS Display

Control how elements behave: block, inline, inline-block, none.

Start Learning

CSS Max-widths

Constrain width for responsive designs.

Start Learning

CSS Position

Static, Relative, Absolute, Fixed, Sticky.

Start Learning

CSS Z-index

Control the stack order of elements.

Start Learning

CSS Overflow

Handle content that is too big to fit.

Start Learning

CSS Float

Push elements to the left or right (legacy layout).

Start Learning

CSS Inline-block

A hybrid of inline and block behaviors.

Start Learning

CSS Align

Centering elements horizontally and vertically.

Start Learning

CSS Flexbox

One-dimensional layouts: align, distribute, and order items easily.

Start Learning

CSS Grid

Two-dimensional layouts with rows and columns.

Start Learning

Media Queries

Responsive design — adapt styles to screen size, orientation, and user preferences.

Start Learning

Styling Text & Links0/5

CSS Text

Color, alignment, decoration, spacing.

Start Learning

CSS Fonts

Font families, weights, and sizes.

Start Learning

CSS Links

Style <a> tags for different states.

Start Learning

CSS Icons

Using icon libraries or SVGs.

Start Learning

CSS Backgrounds

Colors, images, gradients.

Start Learning

Components & UI0/9

CSS Lists

Styling unordered and ordered lists.

Start Learning

CSS Tables

Borders, striping, and alignment for tables.

Start Learning

CSS Navigation Bars

Horizontal and vertical menus.

Start Learning

CSS Dropdowns

Reveal content on hover.

Start Learning

CSS Image Gallery

Grid layouts for images.

Start Learning

CSS Image Sprites

Combine multiple images into one to reduce requests.

Start Learning

CSS Forms

Styling inputs, buttons, and focus states.

Start Learning

CSS Gradients

Smooth color transitions for backgrounds, borders, and text.

Start Learning

Box & Text Shadows

Add depth with box-shadow and text-shadow.

Start Learning

Advanced Selectors0/4

CSS Combinators

Descendant, Child, Adjacent Sibling, General Sibling.

Start Learning

CSS Pseudo-classes

States like :hover, :focus, :first-child.

Start Learning

CSS Pseudo-elements

Style parts of an element: ::before, ::after, ::first-line.

Start Learning

CSS Attr Selectors

Select by attribute existence or value.

Start Learning

Advanced Features0/8

CSS Opacity

Transparency from 0.0 (invisible) to 1.0 (solid).

Start Learning

CSS Counters

Automatic numbering with CSS variables.

Start Learning

CSS Math Functions

calc(), min(), max(), clamp().

Start Learning

CSS Transitions

Animate property changes smoothly between two states.

Start Learning

CSS Transforms

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

Start Learning

CSS Animations

Multi-step keyframe animations that run automatically.

Start Learning

CSS Variables (Custom Properties)

Reusable, themeable values declared with -- and used via var().

Start Learning

CSS Filters

Visual effects for images and elements: blur, brightness, contrast, drop-shadow, and more.

Start Learning

Ready when you are

Take the CSS Quiz

A 30-question quiz covering selectors, the box model, flexbox, grid, animations and more. Pass and download a personalized completion certificate.

Start CSS Quiz