Learn CSS

Learn what CSS is, how it connects to HTML, and write your first stylesheet. Understand the cascade, inheritance, and how browsers apply styles.

Master every CSS selector — type, class, ID, attribute, combinator, and pseudo selectors — and understand specificity and the cascade.

Work with color in CSS — hex, rgb, hsl, oklch, opacity — and style backgrounds with colors, images, gradients, and multiple layers.

Style text with CSS — font families, sizes, weights, line height, letter spacing, text alignment, decoration, and web fonts.

Understand the CSS box model — content, padding, border, and margin — and how box-sizing affects layout calculations.

Understand CSS display values — block, inline, inline-block, none, and more — and how they control how elements participate in the page flow.

Control where elements appear on the page with CSS position — static, relative, absolute, fixed, and sticky — plus z-index and stacking contexts.

Build one-dimensional layouts with CSS Flexbox — flex containers, flex items, alignment, wrapping, ordering, and real-world patterns.

Build two-dimensional layouts with CSS Grid — grid containers, tracks, areas, placement, alignment, and responsive grid patterns.

Build websites that work on any screen size with media queries, fluid layouts, responsive images, and a mobile-first workflow.

Animate property changes smoothly with CSS transitions — timing functions, delays, transform, and performance best practices.

Create complex multi-step motion with CSS keyframe animations — @keyframes, animation properties, timing, fill modes, and performance.

Use CSS custom properties to create reusable design tokens, build theme systems, and write more maintainable stylesheets.

Style elements based on state, position, and structure — :hover, :focus, :nth-child, :not, :is, :where, :has, and form state pseudo-classes.

Target specific parts of elements and insert generated content with ::before, ::after, ::placeholder, ::selection, ::marker, ::first-line, and ::first-letter.

Write scalable, maintainable CSS with naming conventions, file organisation, specificity management, and proven architectural patterns.

Explore powerful modern CSS — container queries, cascade layers, :has(), logical properties, color-mix(), nesting, and scroll-driven animations.