Learn CSS: Step by Step
Master layouts and styling. 30 lessons, in order, each with a code editor to practice in.
Start with lesson 1: What Is CSS? Inline, Internal and External Styles →Getting Started
- What Is CSS? Inline, Internal and External StylesLearn what CSS is, the three ways to add it to a page, and link your first stylesheet to turn plain HTML into a styled page.
- CSS Syntax and Basic SelectorsLearn how a CSS rule is written, then target elements with type, class, ID, universal and grouped selectors, and add comments to your code.
- Browser DevTools: Inspect, Edit and Debug CSSOpen your browser's DevTools, inspect any element, edit CSS live and find out why a style is not working, using a hands-on practice card.
- CSS Colors: Names, HEX, RGB, HSL and OpacitySet text and background colors with names, HEX, RGB and HSL, add transparency with alpha and opacity, and convert values with our free tool.
- CSS Text and Fonts: font-family, Size, Weight, Line HeightStyle text with font-family, font-size, font-weight, line-height and web fonts, and see exactly which class or id styles which HTML element.
- CSS Units: px, rem, em, % and Viewport UnitsUnderstand absolute and relative CSS units, learn when to use px, rem, em, percentages, vw and vh, and avoid the classic em-compounding trap.
- The CSS Box Model: Content, Padding, Border and MarginLearn how every element is a box made of content, padding, border and margin, how to size and space it, and how box-sizing changes the maths.
- CSS Reset, box-sizing and Margin CollapseLearn why browsers need a CSS reset, apply box-sizing: border-box to every element, write a small modern reset and understand margin collapse.
- CSS Backgrounds, Gradients, Borders, Rounded Corners and ShadowsDecorate boxes with background colors, gradients and images, borders, border-radius and box-shadow, and build a polished profile card step by step.
Selectors and the Cascade
- CSS Selectors in Depth: Combinators and Attribute SelectorsLearn CSS combinators and attribute selectors to target elements by relationships, children, siblings, and specific HTML attributes.
- CSS Pseudo-classes and Pseudo-elements: :hover, :focus, ::beforeStyle hover, focus, checked and disabled states, pick items with :nth-child, and add decorative content with ::before and ::after, step by step.
- CSS Specificity, the Cascade, Inheritance and !importantFind out why one CSS rule beats another. Learn how specificity is scored, how the cascade and inheritance work, when to use !important, and what @layer does.
- CSS display, position, z-index and overflow ExplainedLearn CSS display modes, positioning, z-index stacking, and overflow to control element layout, layering, and content that exceeds its container.
- Styling Lists, Links, Buttons and Forms with CSSTurn plain lists into menus, style link states and buttons, and build a clean, accessible form with inputs, select, textarea and checkboxes.
- Sticky Headers and Classic Page Layout Patterns in CSSUse position: sticky for headers and sidebars, then build the centered container, sidebar layout and holy grail page with a footer that stays at the bottom.
Layout
- CSS Flexbox Basics: Containers, Items, Direction and flexLearn how Flexbox lays out items in a row or column, what the main and cross axes are, and how flex-direction, gap, flex-grow, flex-basis and order work.
- Flexbox Alignment and Wrapping: justify-content, align-itemsControl where flex items sit with justify-content, align-items and align-self, let them wrap onto new lines, and center anything with a few lines of CSS.
- Real Flexbox Layouts: Navbar, Cards, Search Bar and CenteringBuild five common interface patterns with Flexbox: a navbar, a centered hero, equal-height cards, a comment row and a search bar, with a map of every class.
- CSS Grid Basics: Rows, Columns, fr Units and gapBuild two-dimensional layouts with CSS Grid: define columns and rows, use fr units and repeat(), set gaps, span items and make a responsive gallery.
- CSS Grid Areas and Responsive Grids: auto-fit and minmaxDraw a page layout with grid-template-areas, rearrange it by changing one rule, and build card grids that adapt with auto-fit, auto-fill and minmax().
- Responsive Web Design: Mobile-First and Media QueriesMake one page work on phones, tablets and desktops. Learn the viewport tag, mobile-first CSS, media queries, breakpoints and flexible images by example.
- Fluid Type with clamp(), min(), max() and Container QueriesMake text and spacing scale smoothly with clamp(), min(), max() and calc(), then build components that adapt to their own space using container queries.
Modern CSS
- CSS Variables (Custom Properties): Design Tokens and ThemingStore colors, spacing and radii in CSS variables, reuse them with var(), override them in any scope and build a themeable design system with a map of classes.
- Dark Mode and Theming: prefers-color-scheme and a Theme ToggleBuild dark mode with CSS variables, follow the visitor's system theme with prefers-color-scheme, add a remembered toggle button, and design a good dark palette.
- CSS Transitions and Transforms: Smooth Hover and Motion EffectsAnimate state changes with transition and move, rotate, scale and skew elements with transform, using safe timing, performance and reduced-motion habits.
- CSS Animations and @keyframes: Spinners, Pulses and LoadersCreate looping, multi-step animations with @keyframes and animation: spinners, pulses, bounces, staggered reveals, progress bars and skeleton loaders.
- Modern CSS Selectors: :is(), :where(), :has() and :focus-withinShorten your CSS with :is() and :where(), style a parent based on its children with :has(), and react to focus inside a group with :focus-within.
- CSS Nesting and Cascade Layers: Organise Large StylesheetsWrite cleaner CSS with native nesting and the & selector, then control which styles win with @layer: order, unlayered styles, !important and third-party CSS.
- CSS Architecture: BEM Naming and Organising StylesheetsLearn BEM naming, low-specificity selectors, and stylesheet organisation to keep large CSS projects clean, scalable, and maintainable.
- CSS Performance and Accessibility: Focus and ContrastMake CSS fast and usable for everyone: visible focus styles, colour contrast, reduced motion, skip links, hidden text, stable layouts and efficient rendering.