CSS Cheat Sheet

Updated 2026-07-17

Next Topic: CSS Flexbox Layout Cheat Sheet

🎯Take a practice test on this topic12 practice tests · 420 questions→

🧠Study flashcards on this topic238 cards · spaced repetition→

Cascading Style Sheets (CSS) is the styling language of the web, responsible for controlling the visual presentation of HTML documents. Introduced in 1996 and continuously evolved through modular specifications, CSS enables developers to separate content from presentation, creating responsive, accessible, and visually compelling user interfaces. While HTML provides structure and JavaScript adds interactivity, CSS bridges the gap between raw markup and polished design. The key mental model is that CSS is a cascade: origin, importance, layers, specificity, and source order together decide which rule actually wins, and inheritance fills in the rest. Modern CSS adds native nesting, cascade layers, container queries, anchor positioning, scroll-driven animations, and view transitions, so a working grasp of the whole cascade is what keeps a stylesheet maintainable as it grows.

What This Cheat Sheet Covers

This topic spans 38 focused tables and 347 indexed concepts, 238 flashcards, 12 practice tests with 420 questions. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.

Table 1: Selectors — Element, Class, and IDTable 2: Combinator SelectorsTable 3: CSS NestingTable 4: Pseudo-Classes — State and PositionTable 5: Pseudo-ElementsTable 6: Box Model PropertiesTable 7: Display and VisibilityTable 8: PositioningTable 9: Logical PropertiesTable 10: Anchor PositioningTable 11: Flexbox Container PropertiesTable 12: Flexbox Item PropertiesTable 13: Grid Container PropertiesTable 14: Grid Item PropertiesTable 15: Typography PropertiesTable 16: Color and BackgroundsTable 17: Color FunctionsTable 18: Borders and OutlinesTable 19: Units of MeasurementTable 20: Overflow and ClippingTable 21: TransformsTable 22: TransitionsTable 23: AnimationsTable 24: Scroll-Driven AnimationsTable 25: View TransitionsTable 26: Filters and Blend ModesTable 27: Media QueriesTable 28: Custom Properties (CSS Variables)Table 29: Container QueriesTable 30: Cascade LayersTable 31: Aspect Ratio and Object SizingTable 32: Scroll BehaviorTable 33: List StylingTable 34: Cursor StylesTable 35: Table StylingTable 36: Form StylingTable 37: Print StylesTable 38: Stacking Context and Z-Index

Quick IndexSubscribe to unlock

A jump-to index of every table row in this cheat sheet.

Mind MapSubscribe to unlock

An interactive map of every table and concept in this topic.

Table 1: Selectors — Element, Class, and ID

These are the building blocks you reach for first, the patterns that tell the browser which elements a rule applies to. Class selectors carry most of the day-to-day load because they're reusable, while ID selectors stay deliberately rare given the specificity they drag into every later override. The attribute variants at the bottom target elements by what's written in their HTML, matching a value exactly, by substring, by prefix or suffix, or as a whole word in a space-separated list.

Selector	Example	Description
Class selector	`.btn { padding: 10px; }`	• Targets elements with a specific class attribute • reusable across multiple elements.
Type selector	`p { color: blue; }`	• Targets all elements of a specific HTML tag • applies broadly across the document.
ID selector	`#header { height: 80px; }`	• Targets a single unique element with a specific ID • high specificity, use sparingly.
Universal selector	`* { margin: 0; }`	• Matches every element in the document • adds zero specificity, which is what makes it safe for CSS resets.
Attribute selector	`[type="text"] { border: 1px solid; }`	Targets elements based on the presence or exact value of an attribute.
Attribute contains	`[class*="btn"] { cursor: pointer; }`	Matches elements whose attribute value contains the specified substring anywhere.
Attribute starts with	`[href^="https"] { color: green; }`	Matches elements whose attribute value begins with the specified string.
Attribute ends with	`[src$=".jpg"] { border: 2px solid; }`	Matches elements whose attribute value ends with the specified string.
Attribute word match	`[class~="active"] { font-weight: bold; }`	Matches elements whose space-separated attribute value list contains the exact word.
Attribute hyphen prefix	`[lang\|="en"] { font-style: italic; }`	Matches an attribute value that is exactly the term or begins with it followed by a hyphen, commonly used for language subcodes.

Table 2: Combinator Selectors

Combinators express relationships between elements rather than matching them in isolation. The distinction that trips people up is descendant versus child: div p reaches any paragraph nested anywhere inside, while div > p insists on a direct parent-child link. The two sibling combinators round things out, letting you style what comes immediately after an element or every element that follows it.

Combinator	Example	Description
Descendant combinator	`div p { color: red; }`	Targets all `<p>` elements anywhere inside `<div>`, regardless of nesting depth.

The rest of this section is part of the full cheat sheet

Table 3: CSS Nesting

Native CSS nesting lets you write child rules inside their parent block the way Sass has for years, with no build step, and it has worked across browsers since December 2023. The & nesting selector stands in for the elements the parent matched, and you need it whenever the nested part must attach with no space, such as a pseudo-class or a second class. Plain child selectors and combinators nest fine without it, and & can never be glued to text to build a name like .card__title.

Feature	Example	Description
Nesting selector `&`	`.btn {` `color: blue;` `&:hover { color: red; }` `}`	• `&` represents the parent selector, and can sit anywhere in the nested selector • required when the nested part must attach with no whitespace, such as a pseudo-class or a compound selector • cannot be concatenated: Sass's `&__title` is invalid CSS.

The rest of this section is part of the full cheat sheet

Table 4: Pseudo-Classes — State and Position

Pseudo-classes pick elements by something the markup alone cannot say: a state the element is in, or where it sits among its siblings. They fall into interaction states (:hover, :focus, :checked), structural matches (:nth-child, :first-child), and functional ones (:is(), :where(), :has()) that change how a whole selector is weighted. Two traps are worth learning early: :nth-child counts every sibling whatever its tag, and :has() styles the element it is attached to, not the thing inside the parentheses.

Pseudo-Class	Example	Description
:hover	`a:hover { color: red; }`	• Applies while a pointer is over the element • unreliable on touch: may never match, or stay stuck until the next tap.

The rest of this section is part of the full cheat sheet

Table 1: Selectors — Element, Class, and ID

Selector	Example	Description
Class selector	`.btn { padding: 10px; }`	• Targets elements with a specific class attribute • reusable across multiple elements.
Type selector	`p { color: blue; }`	• Targets all elements of a specific HTML tag • applies broadly across the document.
ID selector	`#header { height: 80px; }`	• Targets a single unique element with a specific ID • high specificity, use sparingly.
Universal selector	`* { margin: 0; }`	• Matches every element in the document • adds zero specificity, which is what makes it safe for CSS resets.
Attribute selector	`[type="text"] { border: 1px solid; }`	Targets elements based on the presence or exact value of an attribute.
Attribute contains	`[class*="btn"] { cursor: pointer; }`	Matches elements whose attribute value contains the specified substring anywhere.
Attribute starts with	`[href^="https"] { color: green; }`	Matches elements whose attribute value begins with the specified string.
Attribute ends with	`[src$=".jpg"] { border: 2px solid; }`	Matches elements whose attribute value ends with the specified string.
Attribute word match	`[class~="active"] { font-weight: bold; }`	Matches elements whose space-separated attribute value list contains the exact word.
Attribute hyphen prefix	`[lang\|="en"] { font-style: italic; }`	Matches an attribute value that is exactly the term or begins with it followed by a hyphen, commonly used for language subcodes.

Table 2: Combinator Selectors

Combinator	Example	Description
Descendant combinator	`div p { color: red; }`	Targets all `<p>` elements anywhere inside `<div>`, regardless of nesting depth.

Table 3: CSS Nesting

Feature	Example	Description
Nesting selector `&`	`.btn {` `color: blue;` `&:hover { color: red; }` `}`	• `&` represents the parent selector, and can sit anywhere in the nested selector • required when the nested part must attach with no whitespace, such as a pseudo-class or a compound selector • cannot be concatenated: Sass's `&__title` is invalid CSS.

Table 4: Pseudo-Classes — State and Position

Pseudo-Class	Example	Description
:hover	`a:hover { color: red; }`	• Applies while a pointer is over the element • unreliable on touch: may never match, or stay stuck until the next tap.