Academy
STYLE

CSS Tutorial

Turn structure into design: selectors, the box model, flexbox, grid, responsive design and animation.

0/16 lessons complete

  1. 01CSS IntroductionThree ways to add CSS and how a rule is built.
  2. 02SelectorsType, class, id, attribute, grouping and combinators.
  3. 03Cascade, Specificity & InheritanceWhy one rule wins over another.
  4. 04Colors & Unitshex, rgb, hsl, oklch and px vs rem vs %.
  5. 05The Box Modelcontent, padding, border, margin and box-sizing.
  6. 06Typographyfont-family, weight, size, line-height, spacing and web fonts.
  7. 07Backgrounds, Borders & ShadowsGradients, radius, outline, box-shadow and glows.
  8. 08Display & Positionblock, inline, inline-block, none; static, relative, absolute, fixed, sticky.
  9. 09FlexboxOne-dimensional layout: direction, justify, align, gap, wrap and grow.
  10. 10CSS GridTwo-dimensional layout with columns, rows, areas and auto-fit.
  11. 11Responsive DesignMobile-first media queries, fluid type and container widths.
  12. 12Transitions & Animationstransition, transform, keyframes and timing functions.
  13. 13Custom Properties (Variables)Design tokens, theming and dark mode.
  14. 14Pseudo-classes & Pseudo-elements:hover, :focus, :nth-child, :not, ::before, ::after.
  15. 15Modern CSSNesting, :has(), container queries, aspect-ratio and clamp().
  16. 16Project: Build a Neon Card GridCombine grid, variables, shadows and transitions.