CSS tutorial

Learn how to style responsive, easy-to-use web pages with modern CSS.

Course contents

CSS Basics — Before learning CSS rules, let us understand what CSS does and why it is important.
Basic Selectors — Type, class, id and universal selectors; the four combinators; attribute selectors; and how simple, compound and complex selectors differ.
Pseudo-Selectors — State, structural, form and functional pseudo-classes, generated content with ::before and ::after, text and marker pseudo-elements, and the difference between the two.

CSS Rule Priority — Learn how the browser decides which CSS rule to apply when multiple rules target the same element: origin and importance, specificity, source order, inheritance, the four reset keywords, and when it is appropriate to use !important.

CSS Units — Learn about the five types of CSS values, why length values need units, and how units like px, em, rem, %, and viewport units are different. You'll also learn when to use each one.
CSS Variables — Learn how to use CSS variables (custom properties) to store values and reuse them throughout your stylesheet. You'll also learn how functions like calc(), min(), max(), and clamp() help the browser calculate sizes automatically.

Box Model — Learn about the four layers that make up every HTML element, how the browser calculates an element's final size, why content-box can be confusing, and how border-box helps simplify sizing.
Spacing — Padding and margin, shorthand values, negative margins, borders, rounded corners, margin collapsing, and outlines.
CSS Sizing — width and height versus auto, the intrinsic keywords, min and max constraints, the overflow values and scroll containers, single-line truncation and aspect-ratio.

Display Elements — What display controls, block versus inline versus inline-block, the three ways to hide something, normal flow, block formatting contexts and what floats are still for.

Flexbox Basics — Learn how Flexbox works using flex containers, flex items, the main axis and cross axis, wrapping, gaps, and how flex-basis, flex-grow, and flex-shrink control item sizes.
Flexbox Alignment — Learn how to position and align flex items using justify-content, align-items, align-self, and align-content. You will also learn how to center items, use auto margins, and create common Flexbox layouts.

Grid Basics — Learn the fundamentals of CSS Grid, including tracks, lines, cells, and areas, along with useful features such as fr, repeat(), minmax(), and auto-fit. You will also learn how to place items in a grid and when to use Grid instead of Flexbox.

CSS Positioning — Learn how to control the position of elements using static, relative, absolute, fixed, and sticky. You will also learn about containing blocks, the relative-parent pattern, inset properties, and common sticky positioning issues.
Z-Index — Paint order, when z-index applies, what a stacking context is and what creates one, why z-index: 9999 can lose, and how to debug layering properly.

Responsive Design — Flexible layouts and media, the viewport meta tag, media query syntax and device capabilities, mobile-first, content-driven breakpoints, responsive images and preventing layout shift.

Font Styling — Font stacks and generic families, size, style and numeric weights, the font shorthand and its reset trap, @font-face for custom fonts, and font-display.
Text Formatting — Line height and spacing, alignment and transforms, link states in LVHA order, list markers, white space and wrapping for long URLs, readable measure and text-wrap.

Colors — Named, hex, rgb() and hsl() formats; building tints and shades with hsl; alpha versus opacity and why the difference matters; currentColor; and contrast.
Backgrounds — Background layers, position, size and the shorthand's reset trap; linear, radial and conic gradients with colour stops; box and text shadows; and filters including drop-shadow.

Transitions — The four transition properties, choosing durations and easing, what can and cannot animate, and the transform functions — including why order matters.
Animations — @keyframes and the animation properties, fill modes and direction, easing including steps() and cubic-bezier(), and honouring prefers-reduced-motion.

Form Styling — What you can style directly, font: inherit and box-sizing, accent-color versus appearance: none, the state pseudo-classes, :user-invalid, and accessible error feedback.
UI Components — Custom controls built on real inputs, table styling, reusable button and card patterns, SVG icons with currentColor, native details and dialog, and interaction feedback.

Cheat Sheet — Every selector, unit, property and recipe from this course on one page — from the box-sizing reset to grid track syntax, accessibility patterns and twenty-plus copy-ready recipes.
Comparison Guide — The pairs that are easy to confuse, side by side: display none vs visibility hidden, em vs rem, border vs outline, flexbox vs grid, fixed vs sticky, alpha vs opacity and more.