CSS Tutorial

CSS (Cascading Style Sheets) controls color, type, spacing, and layout. This track follows selectors → box model → look → layout → responsive → motion, with explanations, tables, pitfalls, runnable demos, and short exercises — denser than a cheat sheet.

Know basic HTML tags first. Then continue with JavaScript or Vue.

Many examples run in this site’s playground; you can also copy them into local .html / .css files.

Learning path

Start here

1. CSS intro
2. Selectors
3. Pseudo-classes and pseudo-elements
4. Cascade and specificity
5. Box model
6. Units
7. Logical properties and writing modes

Look and type

8. Typography
9. Colors and backgrounds
10. Borders, radius, and shadows
11. Images and media sizing
12. Display and positioning
13. Float and clear
14. Overflow and scrolling

Modern layout

15. Flexbox
16. Grid
17. Centering techniques
18. Responsive design
19. Container queries

A bit further

20. Transitions and animation
21. Custom properties
22. Styling forms
23. Stacking and z-index
24. Filters and blend modes
25. Summary

Next: CSS intro