CSS Tutorial - A complete beginner’s guide to CSS

Install and set up VS Code for HTML editing, add the HTML Preview extension, and customize settings and themes, including a dark theme, for a better coding experience.

Set up CodePen as your editor for HTML and CSS. Sign in or sign up, open your work, create a new pen, paste code, and start coding.

Explore the three basic CSS selectors—element, class, and ID—and learn how to style all elements of a type, reuse styles with classes, and target a unique element with IDs.

Explore how CSS specificity decides which style applies when multiple rules target the same element, showing how inline styles, IDs, classes, and element selectors determine priority.

Explore how CSS colors control text, backgrounds, borders, and shadows using keywords, hex, rgb(a), hsl, and gradients. Emphasize accessibility and contrast while leveraging currentColor and HTML color codes.

Explore the HTML family tree and learn how parent, child, siblings, ancestors, and descendants shape CSS selectors. See examples with body, section, article, and p to master hierarchy.

Explore the CSS box model and how width and height define element's content size, using units like pixels, percentages, vh, ems, max width, and min width to build responsive layouts.

Master the CSS box model by applying padding to add space inside elements and margin to separate them, using long and short value forms and auto centering.

Explore the CSS border and border-radius to frame content, control width, style, and color, apply borders on all sides with long or short syntax, and create rounded corners.

Learn to apply box-shadow to any element to add depth and style, using single or multiple shadows with offsets, blur, spread, color options, and inset for inner shadows.

Compare content box and border box in CSS, showing how padding and border affect total width, and explain why border box offers precise control for responsive layouts.

Explore the CSS display property and how divs and spans behave as block, inline, or inline-block elements, shaping the box model, padding, margins, and page layout.

Explore CSS background properties, including colors, images, and gradients—linear, radial, and conic—with color formats, alpha transparency, color stops, directions, and a fallback for accessibility.

Master the CSS background image property to place, size, repeat, and attach images behind content, creating responsive, visually engaging designs with multiple images.

Explore how CSS float moves elements to the left or right to wrap content, fix container height with clear and flow root, and compare float practices with flexbox and grid.

Explore how CSS overflow controls content that doesn't fit its box, using visible, hidden, scroll, and auto. Learn to clip, scroll, and create scrollable tables and confined layouts.

Learn how the CSS position property controls element placement, stacking, and layout with static, relative, absolute, fixed, and sticky values, using top, right, bottom, left, and z-index.

Master the z-index property to control the stacking order of positioned elements, understanding stacking contexts, and using a defined scale with real-world examples like overlays and modals.

Create a stylish CSS card from scratch: a 320px wide white container with rounded corners, a shadow, an image, and a top-right red badge.

Explore how CSS fonts shape web text by applying font-family and selectors to control typeface, size, spacing, and readability, with safe fallbacks and generic families.

Master the CSS font-size property by using relative units like m and rem to ensure readable, responsive typography across components.

Explore font weight, style, decoration, and variants in css properties, using 100–900, bold, italic, small caps, and underline. Learn about line height, letter spacing, word spacing, and text transform.

Learn to import and define custom fonts with font-face, assign a font-family, apply to headings and body with fallbacks, and use formats like woff2, woff, ttf.

Explore how Google Fonts provides open-source fonts for websites. Learn to embed via link or import, apply font family in css, and optimize performance with fallbacks and limited font weights.

Learn to control text alignment and wrapping with css, using left, right, center, and justify alignment and the white-space, overflow, and word-break properties to shape text flow.

Learn how to use the CSS group selector to apply the same styles to multiple elements or classes by comma-separated selectors, reducing code duplication and keeping styles clean.

Master the four link states: unvisited, visited, hover, and active by styling with color, text-decoration, and focus, while applying the love-hate rule to ensure accessible, interactive hyperlinks.

Use the universal selector, shown by an asterisk, to target all elements, apply global defaults like margins, paddings, and box-sizing, and compare its effects with styling only the body.

Master CSS fundamentals from selectors to the box model and typography. Learn how CSS works with HTML to build responsive, accessible designs using media queries and advanced selectors.