CSS
Styling, layout and the cascade.
CSS is taught here in 14 lessons, running from CSS: getting started through to Debugging CSS, resets and browser support. Each lesson takes one topic, shows the working code, and links onward to the next, so the course can be read straight through in order.
| Track | Front-end Development |
| Lessons | 14 |
| Level | Beginner to intermediate |
| Reading time | about 3 hours |
| Prerequisites | Helpful, but not required: HTML |
Lessons
- CSS: getting startedHow a stylesheet attaches to HTML, how rules are read, and the cascade that decides which declaration wins.
- Selectors and specificityThe selector vocabulary — combinators, attributes, pseudo-classes — plus a reliable way to reason about specificity.
- The box modelContent, padding, border and margin — plus collapsing margins and how sizing math really works.
- FlexboxOne-dimensional layout done properly: main vs cross axis, alignment, growth factors, and the properties that trip people up.
- CSS GridTwo-dimensional layout: tracks, the fr unit, placement by line or area, and responsive grids without media queries.
- Responsive designMedia queries, fluid units, and modern container queries — building layouts that adapt instead of breaking.
- Typography, fonts and fluid typeFont stacks and web fonts, line-height and measure, text wrapping, and type that scales with clamp instead of breakpoints.
- Color, backgrounds and dark modeColor notations including oklch, gradients and background layers, shadows versus borders, and a dark mode built on tokens.
- Units, custom properties and calcChoosing between px, em, rem and viewport units, inheriting variables, registering them with @property, and doing arithmetic safely.
- Positioning, stacking and overflowStatic through fixed, the containing block, sticky behaviour, z-index and stacking contexts, scroll containers and aspect ratio.
- Transitions, transforms and animationWhich properties can transition, timing functions, transform functions and 3D, keyframe animation and reduced motion.
- Modern selectors and cascade control:is, :where, :has, nth-child of, native nesting, cascade layers and scoped styles.
- CSS architecture, naming and design tokensNaming conventions, component versus utility thinking, two tiers of tokens, file organisation and avoiding specificity wars.
- Debugging CSS, resets and browser supportReading DevTools computed styles, hunting overflow and collapsed margins, choosing a reset, and feature queries.
More in Front-end Development
HTML JavaScript TypeScript HTML DOM AJAX JSON Tailwind CSS Bootstrap 5 Foundation Vue.js React Next.js Angular jQuery ECharts Chart.js SVG Font Awesome
FAQ
How long does the CSS course take?
It has 14 lessons, about 3 hours of reading. Expect roughly twice that if you type out and run every example.
Do I need prior experience for CSS?
Not strictly. It helps to have read HTML first, because some lessons build on it, but every lesson explains its own assumptions.
What should I read after CSS?
Continue with JavaScript (14 lessons), the next course in Front-end Development.
Last refreshed 2026-09-18.