CSS Examples & Practice
CSS Syllabus
This syllabus lays out everything you need to learn CSS well, grouped into eight modules that build on each other. Work through them in order — each module maps directly to sections in this tutorial. Use it as a checklist and tick topics off as you master them.
How the syllabus is structured
The path moves from fundamentals (syntax, selectors, the box model) through layout (flexbox, grid, responsive design) to advanced topics (animations, custom properties, SASS). Aim to finish a module before moving on, and do the exercises and challenges as you go.
Module overview
| Module | Focus | Key topics |
|---|---|---|
| 1. Foundations | How CSS works | Syntax, how to add CSS, comments, cascade and inheritance |
| 2. Selectors | Targeting elements | Type, class, id, attribute, grouping, combinators, pseudo-classes, pseudo-elements |
| 3. Box model | Element sizing | Content, padding, border, margin, box-sizing, width and height, overflow |
| 4. Colors & text | Visual styling | Colors, units, backgrounds, fonts, text properties, lists, links |
| 5. Layout: Flexbox | One-dimensional layout | Flex container and items, direction, justify, align, wrap, order |
| 6. Layout: Grid | Two-dimensional layout | Grid template columns and rows, gaps, areas, auto-fit and minmax |
| 7. Responsive | Adapting to screens | Media queries, mobile-first, relative units, fluid type, responsive images |
| 8. Advanced | Polish and scale | Transitions, transforms, animations, custom properties, SASS, best practices |
Detailed topic checklist
Module 1 — Foundations
- What CSS is and how the browser applies it
- Three ways to add CSS: inline, internal and external
- Anatomy of a rule: selector, property, value, declaration
- The cascade, specificity and inheritance
Module 2 — Selectors
- Type, class and id selectors
- Grouping and combinators (descendant, child, sibling)
- Attribute selectors
- Pseudo-classes (:hover, :focus, :nth-child) and pseudo-elements (::before, ::after)
Module 3 — Box model
- Content, padding, border and margin
- box-sizing: border-box and why it matters
- Width, height, min/max sizing
- Overflow and the display property
Module 4 — Colors, text and backgrounds
- Color formats: named, hex, rgb, hsl
- Units: px, %, em, rem, vw, vh
- Fonts, font stacks and web fonts
- Text alignment, spacing, decoration and transforms
- Backgrounds and gradients
Module 5 — Flexbox
- display: flex and the main/cross axes
- justify-content and align-items
- flex-direction, flex-wrap and gap
- flex-grow, flex-shrink and flex-basis
Module 6 — Grid
- grid-template-columns and grid-template-rows
- gap, spanning and placement
- Named grid areas
- auto-fit, auto-fill and minmax for responsive grids
Module 7 — Responsive design
- The viewport meta tag
- Media queries and breakpoints
- Mobile-first workflow
- Fluid typography with clamp() and responsive images
Module 8 — Advanced
- Transitions and transforms
- Keyframe animations
- CSS custom properties (variables)
- SASS: variables, nesting, mixins and partials
- Naming conventions (BEM) and maintainable CSS
💡
Estimated time: a focused learner can complete this syllabus in 4-6 weeks. See the CSS Study Plan for a week-by-week schedule.