CSS tutorial

Learn CSS with Interactive Tutorials

A beginner CSS course: selectors, colors, the box model, flexbox, and grid. The editor has a stylesheet pane and a demo page. Try it Yourself opens /css/try.

Start CSS introOpen live previewOpen CSS labs

48 chapters. The editor is /css/try.

Topics

Start at intro, or jump to flexbox, grid, or projects.

Start

Syntax, selectors, how to load CSS

Intro · Syntax · Selectors

Box

Color, space, and the box model

Colors · Margin · Box model

Text

Type, links, lists, tables

Text · Fonts · Links

Layout

Display, position, float, align

Display · Position · Align

Modern

Flex, grid, queries, responsive

Flexbox · Grid · Media

Effects

Radius, gradient, motion

Shadows · Transitions · Variables

Practice

100+ copy-and-preview snippets

Buttons · Cards · Nav

Projects

Ten pages you can finish

Card · Gallery · Hero

Bootcamp

Question, hint, solution, Check

Labs · Hints · Style Check

What you get in this tutorial

  • A stylesheet pane. HTML is the demo markup. CSS is the lesson.
  • Its own editor. Lessons are under /css. The preview is /css/try.
  • A chapter path. Change a property, see it paint, press Next.
  • Real-life sheets. Each chapter ends with worked examples: a logger card, a fever protocol, a titration table — CSS on documents that mean something.

Editors

CSS live preview →HTML editor stays at /html/try

Lesson sequence

Every CSS lesson, in order.

  1. 01CSS Intro
  2. 02CSS Syntax
  3. 03CSS Selectors
  4. 04CSS How To
  5. 05CSS Comments
  6. 06CSS Colors
  7. 07CSS Backgrounds
  8. 08CSS Borders
  9. 09CSS Margins
  10. 10CSS Padding
  11. 11Height and Width
  12. 12CSS Box Model
  13. 13CSS Outline
  14. 14CSS Text
  15. 15CSS Fonts
  16. 16CSS Links
  17. 17CSS Lists
  18. 18CSS Tables
  19. 19CSS Icons
  20. 20CSS Display
  21. 21CSS Max Width
  22. 22CSS Position
  23. 23CSS Z-index
  24. 24CSS Overflow
  25. 25CSS Float
  26. 26CSS Inline Block
  27. 27CSS Align
  28. 28CSS Combinators
  29. 29CSS Opacity
  30. 30CSS Pseudo-class
  31. 31CSS Pseudo-element
  32. 32CSS Specificity
  33. 33CSS Rounded Corners
  34. 34CSS Gradients
  35. 35CSS Shadows
  36. 36CSS Transforms
  37. 37CSS Transitions
  38. 38CSS Animations
  39. 39CSS Variables
  40. 40CSS Important
  41. 41CSS Units
  42. 42CSS Box Sizing
  43. 43CSS Flexbox
  44. 44CSS Grid
  45. 45CSS Media Queries
  46. 46CSS Responsive
  47. 47CSS Forms
  48. 48CSS Navigation
  49. 49CSS Examples

FAQ: Learn CSS with Interactive Tutorials

Common questions about this page.

What is the StudyGrid CSS tutorial?

The StudyGrid CSS tutorial is a full beginner track: selectors, the box model, text, layout, flex, grid, and responsive design. Each chapter has copy-and-preview examples.

Should I run css tutorial examples locally for better learning?

Yes. Use the browser editor on StudyGrid for a quick check, then Download the example and run it on your computer. Local runs show real errors and the real toolchain, which is one of the fastest ways to learn css tutorial in this CSS CSS lesson (Learn CSS with Interactive Tutorials).

Is the CSS editor the same as Try HTML?

No. Try CSS is a stylesheet preview at /css/try. Try HTML stays at /html/try. CSS lessons never open the HTML-only editor or the Python editor.

Do I need to install anything to learn CSS?

No. Open a chapter, click Try it in CSS, and the page preview updates in the browser.

Where should I start the CSS tutorial?

Start at CSS Intro, then Syntax, Selectors, and How To. After colors and the box model, continue to flex, grid, and media queries. Use Next at the bottom of each chapter.

Is the CSS tutorial free?

Yes. The CSS studio on StudyGrid (studygrid.in) is free: dashboard, chapters, and the live preview editor.