CSS Tutorial

Learn what CSS is, how it works with HTML, and why stylesheets matter for every web page.

Learn the three ways to add CSS to a page: inline styles, internal stylesheets, and external CSS files.

Learn how element, class, and ID selectors target HTML so your CSS rules apply to the right parts of a page.

Learn common CSS color formats and length units so you can set colors, sizes, and spacing with confidence.

Learn how CSS decides which rule wins when multiple rules target the same element.

Learn the CSS box model: content, padding, border, and margin, and how they build every element on the page.

Learn how margin and padding create space inside and outside elements, including shorthand and common layout patterns.

Learn how to draw borders and outlines, including width, style, color, radius, and when outline is the better choice.

Learn how width, height, min/max constraints, and percentage sizing control element dimensions.

Learn how box-sizing changes whether padding and border are included in an element width and height.

Learn core typography properties: font-family, font-size, font-weight, and related text styling controls.

Learn how line-height, letter-spacing, and word-spacing affect readability and rhythm in text blocks.

Learn text-align, text-decoration, text-indent, and related properties for alignment and text ornaments.

Learn how web fonts work at a beginner level, including system fonts, @font-face ideas, and practical loading tips.

Learn how display controls whether elements behave as block, inline, inline-block, none, flex, and more.

Learn static, relative, absolute, fixed, and sticky positioning, plus top/right/bottom/left offsets.

Learn what flexbox is, how to create a flex container, and how children become flex items.

Learn how flex-direction and flex-wrap control the direction of the main axis and whether items wrap to new lines.

Learn justify-content, align-items, and align-self to distribute and align flex items on the main and cross axes.

Learn how the gap property spaces flex items cleanly without margin tricks.

Learn background-color, background-image, size, position, and practical layering basics for surfaces and heroes.

Learn interactive pseudo-classes such as :hover, :focus, and :active to style user interaction states.

Learn ::before, ::after, and other pseudo-elements for decorative content and text fragments.

Build a small responsive card layout that practices the box model, typography, flexbox, and hover states.

Review the core beginner CSS ideas: cascade, box model, typography, display, positioning, and flexbox.

Learn why responsive design matters and how fluid layouts, flexible media, and breakpoints work together across screen sizes.

Write media queries that change layout, typography, and component behavior at the right viewport conditions.

Make images, video, and embedded media scale safely inside responsive layouts without overflow or distortion.

Write base styles for small screens first, then progressively enhance the layout with min-width media queries.

Style components based on their parent container size instead of only the viewport width.

Understand CSS Grid as a two-dimensional layout system for rows and columns working together.

Define grid tracks with fixed sizes, fr units, repeat(), minmax(), and auto-fit patterns.

Name layout regions with grid-template-areas and assign items to those areas for readable page structure.

Control spacing with gap and align grid items or tracks using justify and align properties.

Choose Grid or Flexbox with confidence by comparing one-dimensional and two-dimensional layout needs.

Define reusable design tokens with custom properties for color, spacing, type, and theme switches.

Add depth and atmosphere with linear and radial gradients plus layered box and text shadows.

Move, scale, rotate, and skew elements with transform functions for polish and interactive feedback.

Animate property changes smoothly over time with transition-property, duration, easing, and delay.

Build keyframe animations for attention, loading states, and entrance effects with control over timing and iteration.

Style site navigation for desktop and small screens, including flex toolbars and mobile menu patterns.

Build consistent button variants and compact badges with shared tokens, states, and accessible contrast.

Style labels, inputs, textareas, and focus states so forms are readable, consistent, and keyboard-friendly.

Compose card surfaces and structured lists for content collections, dashboards, and feature grids.

Support light and dark themes with prefers-color-scheme and CSS variables that swap design tokens.

Build a responsive landing page that combines fluid layout, media queries, visual polish, and reusable components.

Construct a dashboard shell with grid areas, responsive stacking, cards, and a compact toolbar.

Review responsive techniques, Grid, visual design tools, and component patterns from the intermediate CSS path.

Build responsive type, spacing, and layout values with min(), max(), and clamp() instead of endless media query breakpoints.

Write direction-aware CSS with inline and block axes so layouts adapt cleanly for left-to-right and right-to-left writing modes.

Style a parent based on its children or descendants with :has(), unlocking patterns that once required JavaScript.

Organize cascade priority with @layer so resets, tokens, components, and utilities stop fighting each other.

Write nested CSS rules natively in the browser, keeping component styles readable without a preprocessor requirement.

Name CSS classes with Block, Element, Modifier so large stylesheets stay searchable, predictable, and low in specificity.

Choose when to write semantic component classes and when utility classes are the clearer, faster tool.

Centralize color, space, type, and motion decisions as CSS custom properties so themes and products stay consistent.

Use CSS to support keyboard users, motion preferences, contrast, focus visibility, and content that remains usable when styles change.

Craft print-ready pages with @media print so articles, invoices, and reports stay readable on paper and PDFs.

Build a compact CSS design system with tokens, layers, base styles, components, and utilities you can reuse across pages.

Compose a polished marketing landing page with fluid type, logical spacing, modern selectors, and your mini design system.

Build a responsive application shell with sticky header, collapsible navigation, main content, and utility regions.

Write CSS that stays fast: fewer layout thrash risks, lean selectors, efficient animations, and delivery habits that reduce render delay.

Run a practical pre-release checklist covering architecture, accessibility, responsiveness, print, and maintainability.

Compare utility-first, component kits, and CSS-in-JS-adjacent approaches so you can choose tools without abandoning core CSS skills.

Map what to learn next after advanced CSS: deeper layout mastery, design systems, frontend frameworks, and real project practice.