Learn CSS by doing. Work through the lessons in order and you'll have solid CSS fundamentals — from selectors and the box model to layouts and responsive design.
Be comfortable reading basic HTML first — this course assumes it.
Before you start
If you want to practice the exercises in this course on your computer, install VS Code and create a file with a .html extension (for example index.html) then open the HTML file in your browser to see your work.
Inserting CSS
The three ways to add a style sheet to a page — external, internal, and inline CSS — how each is written, and which one this course uses.
Selectors
Target elements precisely — properties and values, attribute selectors, combinator selectors, pseudo-classes, and pseudo-elements.
Typography
Control fonts, sizes, weights, colors, spacing, line-height, and text shadows to style text effectively on any screen.
Backgrounds & Colors
Explore all CSS color formats and every background property — solid color, image, gradient, position, repeat, and attachment.
Box Model
Understand how CSS sizes elements — CSS units, width/height, padding, margin, border, outline, and box-shadow.
Display & Positioning
Master display modes, the position property, z-index, calc/clamp units, tables, lists, and image filters.
Layouts
Build real-world layouts with float, multicolumn, flexbox, CSS grid, and layering techniques.
Animations
Bring CSS to life with transforms, transitions, keyframe animations, and timing functions.
CSS Variables & Functions
Store reusable values in CSS custom properties and use built-in functions like calc(), clamp(), min(), max(), and attr().
Responsive Design
Make layouts adapt to any screen with media queries, container queries, and fluid typography using clamp().