Master CSS from fundamentals to advanced concepts through interactive examples
This tutorial series is designed to take you from CSS beginner to confident practitioner. It will take some time, and you'll need to be patient, but soon you'll see that CSS is a very powerful tool necessary for making engaging websites and applications.
Learn how to select HTML elements using universal, element, class, and ID selectors. Master the foundation of CSS targeting.
BeginnerTarget elements based on their attributes and values with advanced matching patterns including exact, partial, and wildcard matches.
BeginnerStyle elements based on their state or position with :hover, :nth-child, :not(), and many other powerful pseudo-classes.
BeginnerCreate and style special parts of elements using ::before, ::after, ::first-letter, and ::selection pseudo-elements.
BeginnerUnderstand relationships between elements with descendant, child, adjacent sibling, and general sibling combinators.
BeginnerMaster how CSS determines which rules apply when multiple selectors target the same element. Essential for debugging!
IntermediateLearn which properties automatically pass from parent to child elements and how to control inheritance with inherit, initial, unset, and revert.
BeginnerUnderstand absolute (px) and relative units (rem, em, %, vh/vw) plus modern viewport and container query units.
BeginnerCreate reusable, dynamic values with CSS variables. Perfect for theming and maintaining consistency across your styles.
BeginnerExplore all color formats from hex and RGB to modern oklch, oklab, and the powerful color-mix() function.
BeginnerWrite more maintainable CSS with native nesting support. Nest selectors just like you would in Sass or Less, but without preprocessors.
IntermediateTake explicit control over the cascade with @layer. Organize your CSS architecture and manage specificity at scale.
AdvancedCreate scoped styles that only apply within specific boundaries. Perfect for component-based architectures.
AdvancedMaster :is(), :where(), :has(), and complex selector combinations for powerful and flexible styling patterns.
AdvancedPerform calculations with calc(), clamp(), min(), max() and trigonometric functions like sin(), cos(), and tan().
IntermediateUnderstand CSS at-rules including @media, @supports, @keyframes, @property, @container, @layer, and more.
IntermediateCreate smooth, animated transitions between DOM states with the View Transitions API for polished user experiences.
AdvancedMaster font-family, font-size, font-weight, font-style and other essential properties for controlling text appearance.
BeginnerControl text alignment, decoration, transformation, spacing, and wrapping with comprehensive text styling properties.
BeginnerLoad custom fonts with @font-face, optimize with font-display, and leverage Google Fonts and other web font services.
IntermediateExplore the power of variable fonts with font-variation-settings for weight, width, slant, and custom axes in a single file.
AdvancedCreate stunning visual effects with linear, radial, and conic gradients including modern oklch color space gradients.
IntermediateMaster background images, positioning, sizing, repeating, and attachment for flexible background styling.
BeginnerCombine layers with blend modes like multiply, screen, overlay for photoshop-style effects purely in CSS.
AdvancedStyle element borders with width, style, color, and radius. Create rounded corners and complex border patterns.
BeginnerAdd depth with box-shadow and text-shadow. Create elevation, glow effects, and layered shadows.
BeginnerApply visual effects like blur, brightness, contrast, grayscale, and more with the CSS filter property.
IntermediateCreate frosted glass effects by blurring and filtering content behind an element with backdrop-filter.
IntermediateClip elements into custom shapes using circles, polygons, and SVG paths for creative layouts.
AdvancedCreate complex visibility effects using image-based masks and gradient masks for sophisticated designs.
AdvancedMaster one-dimensional layouts with Flexbox. Align, distribute, and order items with powerful flex properties.
IntermediateCreate two-dimensional layouts with CSS Grid. Define rows, columns, and areas for complete layout control.
IntermediateUnderstand static, relative, absolute, fixed, and sticky positioning for precise element placement.
BeginnerCreate newspaper-style multi-column text layouts with column-count and column-width for readable content.
BeginnerControl box generation with display values: block, inline, inline-block, none, and contents.
BeginnerUnderstand floats for text wrapping and when to use modern alternatives like Grid and Flexbox.
BeginnerCreate component-responsive designs with container queries that respond to container size, not viewport.
AdvancedWrite international-friendly CSS with logical properties that adapt to writing direction (LTR/RTL) and mode.
IntermediateAlign nested grid items with parent grid tracks for perfect alignment in card grids and forms.
AdvancedPosition elements relative to other elements with CSS-only anchor positioning for tooltips and dropdowns.
AdvancedTransform elements in 2D and 3D space with translate, scale, rotate, and skew. Create flip cards and perspective effects.
IntermediateCreate keyframe animations with @keyframes. Control timing, duration, iteration, and direction for dynamic effects.
IntermediateSmoothly animate property changes with transitions. Perfect for hover effects, buttons, cards, and interactive UI.
BeginnerControl animations with scroll position using animation-timeline. Create progress bars, parallax, and reveal effects without JavaScript.
AdvancedMaster fluid sizing with CSS math functions. Create responsive layouts that adapt smoothly without media queries.
IntermediateCreate responsive breakpoints with media queries. Learn mobile-first design and modern range syntax.
IntermediateRespect user preferences with media queries for dark mode, reduced motion, high contrast, and more.
IntermediateOptimize your pages for printing with @page rules, page breaks, and print-specific styles.
BeginnerControl image behavior with object-fit, object-position, and aspect-ratio for perfect responsive images.
IntermediateBuild layouts that respond without breakpoints using fluid typography, auto-responsive grids, and intrinsic sizing.
AdvancedControl cursor appearance and pointer interactions. Master cursor types, custom cursors, and pointer-events for interactive UI.
BeginnerCreate smooth scrolling experiences with scroll-behavior, scroll-padding, and scroll-margin properties.
BeginnerBuild carousels and full-page scrollers with CSS scroll snap. Create precise scrolling experiences without JavaScript.
IntermediateControl scroll chaining and bounce effects with overscroll-behavior. Perfect for modals, sidebars, and nested scrollers.
IntermediateMaster form styling fundamentals including input styles, focus states, fieldset styling, and accessible form layouts.
BeginnerStyle all form input types, checkboxes, radio buttons, select menus, textareas, and file inputs with modern CSS techniques.
BeginnerCreate fully custom checkboxes, radio buttons, and toggle switches. Build beautiful, accessible form controls with pure CSS.
IntermediateStyle validation states with :valid, :invalid, :required, and :optional. Provide clear visual feedback for form errors and success.
IntermediateLearn mobile-first methodology and progressive enhancement. Build responsive layouts that scale from mobile to tablet to desktop.
BeginnerCreate touch-friendly interfaces with proper target sizes, touch-action, tap feedback, and gesture considerations.
IntermediateMaster viewport meta tags, modern viewport units (dvh/svh/lvh), safe areas, and iOS-specific optimizations.
IntermediateMaster print stylesheets with @media print, hiding elements, typography, page breaks, and displaying URLs for print.
BeginnerCreate professional print documents with @page properties, headers/footers, counters, and optimized layouts for invoices, reports, and resumes.
Intermediate