CSS Property and Topic Reference

What Is It?

Use the reference below to find a property, selector, value, or at-rule with your browser Find command. Each entry links to a lesson with definitions, working previews, and an editable example. Follow the sidebar order for the guided course.

Properties, Tags and Attributes Explained

property: A style setting such as padding.
selector: A pattern choosing HTML elements.
at-rule: A CSS instruction such as @media or @layer.

Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.

Example 1: Read a declaration

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Property and Topic Reference</title>
  <style>
    .note { padding: 12px; color: #1d4ed8; }
  </style>
</head>
<body>
  <p class="note">A selector chooses the element; properties describe its presentation.</p>
</body>
</html>

Browser preview

What you see: The class rule adds inner space and blue text.

When and Where to Use It

Use this page when you know the name of a feature and want its explanation and examples quickly.

Common Mistake or Useful Tip

This is a practical learning reference, not a claim to include every experimental or vendor-specific CSS feature. The MDN reference linked below includes the wider language index.

Try It Yourself

Search for flex-shrink, text-overflow, or background-position and open the matching lesson.

Find a Property or Topic

Feature	Meaning	Lesson
`--accent / var()`	Define and read a custom property. Custom properties participate in the cascade and normally inherit.	Custom Properties, Calc, Min, Max and Clamp
`::before / ::after`	Generate content before or after an element content; typically need content.	Before, After and Other Pseudo-Elements
`::first-letter`	Styles the first letter of an eligible block.	Before, After and Other Pseudo-Elements
`::marker`	Styles the marker of a list item.	Before, After and Other Pseudo-Elements
`::placeholder`	Styles placeholder text, which does not replace a visible label.	Accent Color, Appearance and Form Validation
`::selection`	Styles selected text with a supported subset of properties.	Text Direction, Decoration Styles and Selection
`:checked / :disabled`	Match selected checkboxes and disabled controls.	Hover, Focus and Form States
`:empty`	Matches an element without element or text children; whitespace text can prevent a match.	Structural, Link and Form State Selectors
`:enabled / :disabled / :read-only`	Match relevant native control states.	Structural, Link and Form State Selectors
`:first-child / :last-child / :only-child`	Match the first, last, or only element child.	Structural, Link and Form State Selectors
`:focus-visible`	Matches focus when the browser determines an indicator is needed, commonly during keyboard navigation.	Hover, Focus and Form States
`:focus-within`	Matches an element that has focus itself or contains a focused descendant.	Structural, Link and Form State Selectors
`:has()`	Matches an element when a relative selector matches from that element; specificity follows its most specific argument.	Is, Where, Not and Has Selectors
`:hover`	Matches a pointing device hovering over an element.	Hover, Focus and Form States
`:is()`	Matches any selector in its list; specificity comes from its most specific argument.	Is, Where, Not and Has Selectors
`:link / :visited / :active`	Match unvisited links, visited links, or activation state; visited styling is privacy-restricted.	Structural, Link and Form State Selectors
`:not()`	Excludes matches; specificity follows its most specific argument.	Is, Where, Not and Has Selectors
`:nth-child() / :nth-of-type()`	Count all element siblings or only siblings of the same tag type.	Structural, Link and Form State Selectors
`:nth-child(even)`	Matches elements in even sibling positions.	Hover, Focus and Form States
`:required / :valid / :invalid`	Match HTML form constraints and validity states.	Accent Color, Appearance and Form Validation
`:where()`	Matches alternatives with zero specificity for the function and its arguments.	Is, Where, Not and Has Selectors
`!important`	Changes declaration priority; avoid using it as a routine fix.	Cascade, Specificity and Inheritance
`!important`	Marks a declaration as important. Important declarations outrank normal declarations within the relevant cascade ordering; specificity still resolves otherwise tied declarations.	Stylesheet Imports and Important Declarations
`.card`	Matches class="card"; classes can be reused.	Element, Class and ID Selectors
`.panel > p`	Matches only direct paragraph children.	Combinators and Attribute Selectors
`.panel p`	Matches any paragraph inside .panel.	Combinators and Attribute Selectors
`[attr]`	Matches presence of an attribute.	Attribute Selector Patterns and Sibling Selectors
`[attr^="value"] / [attr$="value"] / [attr*="value"]`	Match values starting with, ending with, or containing a fragment.	Attribute Selector Patterns and Sibling Selectors
`[attr="value" i]`	Requests ASCII case-insensitive value matching.	Attribute Selector Patterns and Sibling Selectors
`[attr\|="en"]`	Matches exactly en or a value beginning en-.	Attribute Selector Patterns and Sibling Selectors
`[attr~="token"]`	Matches a token in a whitespace-separated attribute value.	Attribute Selector Patterns and Sibling Selectors
`[type="email"]`	Matches an element whose type attribute is email.	Combinators and Attribute Selectors
`@container (min-width: 360px)`	Applies descendant rules when an eligible ancestor container meets the width condition.	Container Queries
`@font-face`	Defines a font-family with src resources; font-display controls behavior while loading.	Font Styles, Shorthand and Web Fonts
`@import`	Loads CSS from a URL and must precede normal style rules, except permitted @charset and layer-order statements.	Stylesheet Imports and Important Declarations
`@keyframes`	Names a sequence of style states.	Keyframe Animations
`@layer`	Declares layer order and groups rules. Later layers outrank earlier layers for normal declarations.	Cascade Layers and Global Keywords
`@media (min-width: 600px)`	Applies rules when the viewport is at least 600 CSS pixels wide.	Responsive Design and Media Queries
`@media print`	Applies rules in print rendering and print preview.	Dark Mode, User Preferences and Print CSS
`@property`	Registers a custom property so the browser can validate and interpolate a declared type.	Variable Fallbacks and Property Registration
`@supports`	Tests syntax support for a declaration or selector; it is not a guarantee of perfect rendering.	Feature Queries and CSS Nesting
`/* comment */`	A note ignored by the CSS parser. CSS comments do not nest.	CSS Syntax and Comments
`&`	Refers to the parent selector in a nested rule.	Feature Queries and CSS Nesting
`#featured`	Matches id="featured"; an ID should be unique in the document.	Element, Class and ID Selectors
`%`	Relative to a property-specific reference, often the containing block.	CSS Units and Sizing Values
`A + B / A ~ B`	Match the immediately following sibling B or any later sibling B of A.	Attribute Selector Patterns and Sibling Selectors
`accent-color`	Changes the accent used by supported controls such as checkboxes and radios.	Accent Color, Appearance and Form Validation
`align-content`	Distributes flex lines in a multi-line container with spare cross-axis space.	Flex Direction, Wrapping and Alignment
`align-items`	Aligns items along the cross axis.	Flexbox Layout
`align-self`	Overrides cross-axis alignment for one item.	Flex Grow, Shrink, Basis, Order and Align Self
`all`	Sets nearly all properties at once; excludes custom properties, direction, and unicode-bidi.	Cascade Layers and Global Keywords
`animation`	Sets name, duration, timing, iteration count, and other animation options.	Keyframe Animations
`animation-delay / animation-fill-mode`	Control start timing and whether styles apply outside the active interval.	Transition and Animation Longhands
`animation-fill-mode`	Controls whether keyframe styles apply outside the active animation interval.	Keyframe Animations
`animation-iteration-count / animation-direction`	Set repetition and forward, reverse, or alternating playback.	Transition and Animation Longhands
`animation-name / animation-duration`	Select keyframes and the duration of one cycle.	Transition and Animation Longhands
`animation-play-state`	running or paused controls playback.	Transition and Animation Longhands
`animation-timing-function`	Sets how progress is interpolated during an animation segment, such as linear or ease-in-out.	Transition and Animation Longhands
`appearance`	Controls native widget appearance; none removes native styling where supported.	Accent Color, Appearance and Form Validation
`article`	A self-contained piece of HTML content.	Project: Responsive Profile Card
`aspect-ratio`	Sets a preferred width-to-height ratio.	Responsive Images and Object Fit
`aspect-ratio`	Sets a preferred ratio, such as 16 / 9.	Intrinsic Sizing, Aspect Ratio and Centering
`backdrop-filter`	Filters the pixels behind an element; the foreground needs transparency to reveal the effect.	Filters, Backdrop Filters and Blend Modes
`backface-visibility`	Controls whether a transformed back face is visible.	Transform Origin, 3D Transforms and Perspective
`background`	Shorthand combining image, position, size, repeat, attachment, origin, clip, and color. A slash separates position from size. Omitted parts reset to their initial values.	Background Images, Size and Position
`background-attachment`	scroll follows the element; local follows its scrolling content; fixed usually anchors to the viewport.	Background Images, Size and Position
`background-blend-mode`	Controls blending among background layers.	Filters, Backdrop Filters and Blend Modes
`background-clip`	Chooses how far the background is painted.	Background Images, Size and Position
`background-color`	A CSS property that paints the element background.	CSS Introduction
`background-color`	Sets the background fill.	Colors and Backgrounds
`background-image`	Adds an image or a generated gradient.	Colors and Backgrounds
`background-image`	Supplies one or more background image layers, including gradients or URL resources. The first listed layer paints on top.	Background Images, Size and Position
`background-origin`	Chooses the positioning area: padding-box by default.	Background Images, Size and Position
`background-position`	Places an image inside its positioning area.	Background Images, Size and Position
`background-repeat`	Controls tiling: repeat, repeat-x, repeat-y, or no-repeat.	Background Images, Size and Position
`background-size`	Sets image dimensions; cover fills the area with possible cropping, contain fits the complete image.	Background Images, Size and Position
`block`	Normally starts a new line and uses available inline space.	Display, Visibility and Opacity
`block-size`	Logical equivalent of height in horizontal writing mode; it follows the block axis in other writing modes.	Width, Height and Overflow
`border`	A line around the padding and content.	Box Model, Margin and Padding
`border`	Shorthand for width, style, and color. A border needs a visible style such as solid.	Borders, Rounded Corners and Shadows
`border-bottom-style`	Sets only the bottom border style, such as solid, dashed, or dotted, without changing its color or width.	Outlines, Border Sides and Border Images
`border-collapse`	separate keeps distinct cell borders; collapse merges adjacent borders.	Table Layout, Cell Spacing and Captions
`border-collapse: collapse`	Merges neighboring table cell borders.	Styling Forms and Tables
`border-image-outset`	Extends border-image painting outside the border box without reserving layout space.	Outlines, Border Sides and Border Images
`border-image-repeat`	Chooses how edge image slices fill their region: stretch, repeat, round, or space.	Outlines, Border Sides and Border Images
`border-image-source / border-image-slice`	Choose an image and slice it into border regions.	Outlines, Border Sides and Border Images
`border-image-width`	Specifies how wide the border image is painted; a number multiplies the corresponding border width.	Outlines, Border Sides and Border Images
`border-inline-start`	Styles the leading inline edge.	Logical Properties and Writing Modes
`border-radius`	Rounds corners; 50% creates a circle when width and height are equal.	Borders, Rounded Corners and Shadows
`border-spacing`	Sets horizontal and vertical gaps in the separate border model.	Table Layout, Cell Spacing and Captions
`border-top / border-right / border-bottom / border-left`	Style individual physical edges.	Outlines, Border Sides and Border Images
`border-width / border-style / border-color`	Set edge widths, styles, or colors with one to four values.	Outlines, Border Sides and Border Images
`box-shadow`	Sets horizontal offset, vertical offset, blur, optional spread, and color.	Borders, Rounded Corners and Shadows
`box-sizing`	content-box makes width and height describe the content box, with padding and borders added outside. border-box includes padding and borders in the declared dimensions and size constraints. Margin remains outside.	Width, Height and Overflow
`box-sizing`	border-box simplifies component width calculations.	Resets, Reusable Components and CSS Organization
`box-sizing: border-box`	Includes padding and border in the declared width and height.	Box Model, Margin and Padding
`break-before / break-after / break-inside`	Control page or column fragmentation where applicable.	Dark Mode, User Preferences and Print CSS
`break-inside`	avoid requests that a content box not split across a column break.	Multi-Column Layout
`calc()`	Combines compatible values with arithmetic; put spaces around + and -.	Custom Properties, Calc, Min, Max and Clamp
`caption-side`	Places the caption above or below the table.	Table Layout, Cell Spacing and Captions
`caret-color`	Sets the text insertion caret color.	Accent Color, Appearance and Form Validation
`ch / ex`	Font-relative measures based on the zero glyph advance or x-height.	Viewport Units, Container Units and Size Limits
`clamp(min, preferred, max)`	Keeps a preferred value between limits.	Custom Properties, Calc, Min, Max and Clamp
`class`	An HTML attribute used to group elements for styling. CSS has properties and values, rather than its own HTML tags.	CSS Introduction
`class`	Connects each component part to its CSS rules.	Project: Responsive Profile Card
`clear`	left, right, or both prevents a box sitting beside matching earlier floats.	Float, Clear and Flow Root
`clip-path`	Chooses a clipping shape such as circle(), inset(), or polygon().	Clip Paths and CSS Masks
`color`	A CSS property that sets text color.	CSS Introduction
`color`	Sets text color.	Colors and Backgrounds
`color / background-color / padding`	CSS properties that change text color, background fill, and space inside an element.	CSS Practice Tools: VS Code and Live Server
`color-scheme`	Tells the browser which schemes an element supports, affecting native controls and default colors.	Dark Mode, User Preferences and Print CSS
`column-count`	Requests a number of columns.	Multi-Column Layout
`column-gap / column-rule`	Set the gutter and an optional separator line.	Multi-Column Layout
`column-span`	all lets a heading span columns.	Multi-Column Layout
`column-width`	Sets a preferred column width; the browser determines how many fit.	Multi-Column Layout
`columns`	Shorthand for column-width and column-count; columns: 150px 2 requests a preferred width and a maximum column count.	Multi-Column Layout
`Computed panel`	Shows resolved property values and box dimensions.	Debugging CSS and Common Mistakes
`conic-gradient()`	Creates color stops around an angle.	Color Formats, Gradients and Transparency
`contain`	Applies layout, paint, size, or style containment, with different effects for each.	Containment and Rendering Performance
`contain-intrinsic-size`	Provides placeholder size information when size containment applies.	Containment and Rendering Performance
`container-type: inline-size`	Establishes inline-axis size containment so descendants can query the container width.	Container Queries
`content`	Generates text, counter values, or decorative images for pseudo-elements. Keep essential information in the HTML.	List Styles and CSS Counters
`content-visibility: auto`	Lets the browser skip rendering work for irrelevant offscreen content.	Containment and Rendering Performance
`counter-reset / counter-increment`	Create and advance a named counter.	List Styles and CSS Counters
`counter()`	Formats a counter value for generated content.	List Styles and CSS Counters
`cqw / cqi`	One percent of query container width or inline size; without a suitable container they fall back to the relevant small viewport unit.	Viewport Units, Container Units and Size Limits
`currentColor`	Uses the computed color property value.	Color Formats, Gradients and Transparency
`cursor`	Chooses a pointer shape such as pointer, text, or not-allowed.	Cursor, Pointer Events, Selection and Resize
`custom property`	A shared design value such as --space or --accent.	Resets, Reusable Components and CSS Organization
`dir`	An HTML attribute expressing text direction, such as rtl.	Logical Properties and Writing Modes
`direction`	Sets CSS text direction, but use the HTML dir attribute to express content direction.	Text Direction, Decoration Styles and Selection
`display: flex`	Makes direct children flex items.	Flexbox Layout
`display: flow-root`	Creates a block formatting context that contains floats.	Float, Clear and Flow Root
`display: none`	Removes the element box from layout and normally from accessibility exposure.	Display, Visibility and Opacity
`div / p`	HTML tags used for a generic demo box and paragraphs. class connects each box to its CSS selector.	Width, Height and Overflow
`em`	For font-size, relative to the parent font size; for most other lengths, relative to the element font size.	CSS Units and Sizing Values
`empty-cells`	show or hide controls empty-cell backgrounds and borders in the separate model.	Table Layout, Cell Spacing and Captions
`fallback`	A working base style written before an optional enhancement.	Feature Queries and CSS Nesting
`filter`	Applies effects such as blur(), brightness(), contrast(), grayscale(), and drop-shadow().	Filters, Backdrop Filters and Blend Modes
`fit-content`	Sizes between intrinsic limits subject to available space.	Intrinsic Sizing, Aspect Ratio and Centering
`flex`	Shorthand for grow, shrink, and basis; flex: 1 1 0 starts from a zero basis.	Flex Grow, Shrink, Basis, Order and Align Self
`flex-basis`	Sets the starting main size before space distribution.	Flex Grow, Shrink, Basis, Order and Align Self
`flex-direction`	row, column, row-reverse, or column-reverse sets the main axis direction.	Flex Direction, Wrapping and Alignment
`flex-flow`	Shorthand for direction and wrapping.	Flex Direction, Wrapping and Alignment
`flex-grow`	Distributes positive free space using growth factors.	Flex Grow, Shrink, Basis, Order and Align Self
`flex-shrink`	Distributes negative free space using shrink factors weighted by flex base sizes.	Flex Grow, Shrink, Basis, Order and Align Self
`flex-wrap`	wrap permits multiple lines; nowrap keeps one line.	Flex Direction, Wrapping and Alignment
`flex-wrap / flex`	Allow wrapping and control how items grow, shrink, and start sizing.	Flexbox Layout
`float`	left or right floats an element; none disables floating.	Float, Clear and Flow Root
`font`	Shorthand with required font-size and font-family; optional line-height follows a slash.	Font Styles, Shorthand and Web Fonts
`font-display`	An @font-face descriptor controlling font loading display behavior; swap permits fallback text while the chosen face loads.	Font Styles, Shorthand and Web Fonts
`font-family`	An ordered list of fonts, ending with a generic fallback.	Fonts and Text
`font-size / font-weight`	Set text size and thickness.	Fonts and Text
`font-style`	Selects a normal, italic, or oblique face.	Font Styles, Shorthand and Web Fonts
`font-variant-caps`	Requests variants such as small-caps.	Font Styles, Shorthand and Web Fonts
`font-variant-numeric`	Controls number forms such as tabular-nums when the font supports them.	Font Styles, Shorthand and Web Fonts
`font: inherit`	Makes form controls use the surrounding font settings.	Styling Forms and Tables
`fr`	Shares available free space between flexible tracks.	CSS Grid Layout
`gap`	Adds space between items.	Flexbox Layout
`gap`	Sets row and column gutters for Grid, Flexbox, and multi-column layout.	Margin, Padding and Spacing Shorthands
`grid-area`	Assigns an item to a named region, or sets row and column start/end positions.	Grid Lines, Spans and Named Areas
`grid-auto-flow`	Chooses row or column auto placement; dense may visually fill earlier holes.	Grid Auto Placement, Alignment and Subgrid
`grid-auto-rows / grid-auto-columns`	Set sizes for implicitly created tracks.	Grid Auto Placement, Alignment and Subgrid
`grid-column`	Places or spans a grid item across column lines.	CSS Grid Layout
`grid-column-start / grid-column-end`	Set the first and last column lines for an item.	Grid Lines, Spans and Named Areas
`grid-row / grid-column`	Shorthands for start and end lines; span 2 occupies two tracks.	Grid Lines, Spans and Named Areas
`grid-row-start / grid-row-end`	Set the first and last row lines for an item.	Grid Lines, Spans and Named Areas
`grid-template`	Shorthand for explicit rows, columns, and named areas.	Grid Lines, Spans and Named Areas
`grid-template-areas`	Names rectangular regions in a grid template.	Grid Lines, Spans and Named Areas
`grid-template-columns`	Defines column tracks.	CSS Grid Layout
`grid-template-columns`	Switches the component from stacked to side-by-side at a wider viewport.	Project: Responsive Profile Card
`grid-template-columns`	Defines explicit column track sizes, such as repeat(2, 1fr).	Grid Lines, Spans and Named Areas
`grid-template-rows`	Defines explicit row sizes.	Grid Lines, Spans and Named Areas
`h2, p`	A comma groups selectors so both receive the rule.	Element, Class and ID Selectors
`height`	Requests the box height. auto normally follows content in ordinary block flow. A fixed length does not automatically grow when content is taller. Percentage heights usually require a definite containing block height.	Width, Height and Overflow
`height: auto`	Preserves intrinsic proportions when width changes.	Responsive Images and Object Fit
`href`	An HTML link destination; this example links to a section in the same page.	Project: Responsive Profile Card
`hsl()`	Describes hue, saturation, and lightness; an optional slash sets alpha.	Color Formats, Gradients and Transparency
`hyphens`	auto allows dictionary-based hyphenation where supported; provide the correct HTML lang attribute.	White Space, Wrapping and Text Overflow
`index.html`	The HTML entry page you open with Live Server.	CSS Practice Tools: VS Code and Live Server
`inherit`	Explicitly takes the parent computed value.	Cascade, Specificity and Inheritance
`inherit`	Uses the parent computed value.	Cascade Layers and Global Keywords
`inherits`	An @property descriptor that explicitly chooses whether the registered property inherits.	Variable Fallbacks and Property Registration
`initial`	Uses the property specification initial value.	Cascade Layers and Global Keywords
`initial-value`	An @property descriptor defining an initial value; required for typed syntax other than the universal syntax and subject to computational independence rules.	Variable Fallbacks and Property Registration
`inline`	Flows with surrounding text; ordinary inline boxes do not accept width and height like blocks.	Display, Visibility and Opacity
`inline-block`	Flows inline while accepting box dimensions.	Display, Visibility and Opacity
`inline-size`	Logical equivalent of width in horizontal writing mode; it follows the inline axis in other writing modes.	Width, Height and Overflow
`inline-size / block-size`	Logical alternatives to width and height.	Logical Properties and Writing Modes
`inset`	Shorthand for top, right, bottom, and left in the same one-to-four-value order as margin.	Position Offsets and Inset Properties
`inset-block-start / inset-block-end`	Place a positioned box relative to the start or end of the block axis.	Position Offsets and Inset Properties
`inset-inline / inset-block`	Logical shorthands for inline-axis and block-axis start/end offsets.	Position Offsets and Inset Properties
`inset-inline-start / inset-inline-end`	Place a positioned box relative to the start or end of the inline axis.	Position Offsets and Inset Properties
`isolation`	isolate confines blending to a new stacking context.	Filters, Backdrop Filters and Blend Modes
`isolation: isolate`	Creates a local stacking context.	Z-Index and Stacking Contexts
`justify-content`	Aligns or distributes items along the main axis.	Flexbox Layout
`justify-items / align-items`	Align items within their grid areas along inline and block axes.	Grid Auto Placement, Alignment and Subgrid
`justify-self`	Aligns one grid item along the inline axis inside its grid area; it does not align an individual flex item.	Grid Auto Placement, Alignment and Subgrid
`label + input`	Matches an input immediately following a label with the same parent.	Combinators and Attribute Selectors
`label for / input id`	HTML attributes connecting a visible label to its control.	Styling Forms and Tables
`letter-spacing`	Adds or removes space between characters.	Text Spacing, Decoration and Effects
`line-height`	Sets line box height; 1.6 means 1.6 times the font size.	Fonts and Text
`linear-gradient()`	Creates a smooth color transition along a direction.	Colors and Backgrounds
`link`	A void HTML element in head. rel="stylesheet" and href="styles.css" load an external stylesheet.	Inline, Internal and External CSS
`link / rel / href`	The HTML link element uses rel="stylesheet" to identify CSS and href="styles.css" to locate the file.	CSS Practice Tools: VS Code and Live Server
`list-style-image`	Uses an image marker; keep a type fallback.	List Styles and CSS Counters
`list-style-position`	Places the marker outside or inside the list item content box.	List Styles and CSS Counters
`list-style-type`	Sets markers such as square, decimal, or lower-roman.	List Styles and CSS Counters
`Live Server`	A VS Code extension by Ritwick Dey that serves your practice folder locally and reloads the browser after saved changes.	CSS Practice Tools: VS Code and Live Server
`margin`	Space outside the border; adjacent vertical block margins can collapse.	Box Model, Margin and Padding
`margin / padding`	One value sets all edges; two set vertical then horizontal; three set top, horizontal, bottom; four set top, right, bottom, left.	Margin, Padding and Spacing Shorthands
`margin-block / padding-block`	Set spacing along the block axis.	Logical Properties and Writing Modes
`margin-inline / padding-inline`	Set spacing along the inline axis.	Logical Properties and Writing Modes
`margin-inline: auto`	Centers a constrained block along the inline axis in ordinary block layout.	Intrinsic Sizing, Aspect Ratio and Centering
`margin-top / margin-right / margin-bottom / margin-left`	Set one physical outer edge.	Margin, Padding and Spacing Shorthands
`mask-image`	Sets an image or gradient controlling masked visibility.	Clip Paths and CSS Masks
`mask-size / mask-repeat`	Control mask sizing and tiling.	Clip Paths and CSS Masks
`max-block-size`	Maximum size along the block axis; usually corresponds to max-height in horizontal writing.	Width, Height and Overflow
`max-content`	Uses the intrinsic width without optional soft wrapping.	Intrinsic Sizing, Aspect Ratio and Centering
`max-height`	Sets the upper height limit. The initial value none means no maximum. It does not by itself hide excess content: combine it with an intentional overflow behavior.	Width, Height and Overflow
`max-inline-size`	Maximum size along the inline axis; usually corresponds to max-width in horizontal writing.	Width, Height and Overflow
`max-width`	Sets the upper width limit, such as 36rem or 100%. The initial value none means no maximum. max-width can reduce a larger requested width.	Width, Height and Overflow
`max-width: 100%`	Prevents an image exceeding its containing width.	Responsive Images and Object Fit
`min-block-size`	Minimum size along the block axis; usually corresponds to min-height in horizontal writing.	Width, Height and Overflow
`min-content`	Uses the smallest intrinsic width, commonly determined by the longest unbreakable segment.	Intrinsic Sizing, Aspect Ratio and Centering
`min-height`	Sets the lower height limit. It reserves a minimum amount of space while allowing an auto-height box to grow with content. The initial auto has layout-dependent behavior.	Width, Height and Overflow
`min-inline-size`	Minimum size along the inline axis; usually corresponds to min-width in horizontal writing.	Width, Height and Overflow
`min-inline-size / max-inline-size`	Constrain dimensions along the logical inline axis.	Viewport Units, Container Units and Size Limits
`min-width`	Sets the lower width limit, such as 180px. The default auto has layout-dependent behavior, particularly for flex and grid items; min-width: 0 can allow those items to shrink below their content-based automatic minimum.	Width, Height and Overflow
`min-width / max-width / min-height / max-height`	Constrain physical box dimensions.	Viewport Units, Container Units and Size Limits
`min() / max()`	Choose the smaller or larger of compatible values.	Custom Properties, Calc, Min, Max and Clamp
`minmax()`	Sets a minimum and maximum track size.	CSS Grid Layout
`mix-blend-mode`	Controls how an element blends with its backdrop.	Filters, Backdrop Filters and Blend Modes
`mobile first`	Write the small-screen layout first, then enhance it for wider screens.	Responsive Design and Media Queries
`modifier class`	An extra class expressing a component variation, such as button--quiet.	Resets, Reusable Components and CSS Organization
`object-fit: contain`	Shows the whole replaced content, leaving space if proportions differ.	Responsive Images and Object Fit
`object-fit: cover`	Fills a specified content box while cropping if necessary.	Responsive Images and Object Fit
`object-position`	Positions replaced content such as an image inside its content box. With object-fit: cover, it controls which part remains visible after cropping.	Responsive Images and Object Fit
`opacity`	Fades the entire element including its descendants.	Color Formats, Gradients and Transparency
`order`	Changes visual order; it does not change DOM or keyboard order.	Flex Grow, Shrink, Basis, Order and Align Self
`outline`	Draws an edge without changing box dimensions; useful temporarily for debugging.	Debugging CSS and Common Mistakes
`outline / outline-offset`	Draw and offset an outline without reserving layout space.	Outlines, Border Sides and Border Images
`outline-color / outline-style / outline-width`	Individual controls for an outline, corresponding to the parts of the outline shorthand.	Outlines, Border Sides and Border Images
`overflow`	Shorthand for overflow-x and overflow-y. visible paints excess content outside; hidden clips and still allows programmatic scrolling; clip clips without creating a scroll container; auto allows scrolling when needed; scroll requests scrolling even without overflow, subject to browser scrollbar behavior.	Width, Height and Overflow
`overflow-wrap`	anywhere permits long unbroken text to wrap and helps narrow content avoid horizontal overflow. It controls text breaking, rather than box dimensions.	Width, Height and Overflow
`overflow-wrap`	anywhere allows long unbroken strings to break when needed.	White Space, Wrapping and Text Overflow
`overflow-x`	Controls horizontal overflow. Useful for wide tables or code lines that should scroll sideways.	Width, Height and Overflow
`overflow-y`	Controls vertical overflow. Useful for lists constrained by height or max-height. When one axis uses a scrollable value, visible on the other axis can compute to auto.	Width, Height and Overflow
`overscroll-behavior`	Controls scroll chaining and boundary behavior.	Scroll Behavior, Snap and Overscroll
`overscroll-behavior-x`	Controls boundary behavior and chaining specifically along the horizontal axis.	Scroll Behavior, Snap and Overscroll
`p`	An HTML paragraph tag; the selector p targets all paragraphs.	CSS Introduction
`padding`	Space between content and border.	Box Model, Margin and Padding
`padding-top / padding-right / padding-bottom / padding-left`	Set one physical inner edge.	Margin, Padding and Spacing Shorthands
`perspective`	Sets the viewer distance for transformed 3D descendants.	Transform Origin, 3D Transforms and Perspective
`place-content`	Shorthand for align-content and justify-content, distributing the collection of tracks when there is spare space.	Grid Auto Placement, Alignment and Subgrid
`place-items / place-self`	Shorthands for paired alignment on a container or one item.	Grid Auto Placement, Alignment and Subgrid
`pointer-events`	none excludes an element from pointer hit testing; it does not by itself prevent keyboard focus.	Cursor, Pointer Events, Selection and Resize
`position: absolute`	Uses its containing block for inset offsets, often the nearest positioned ancestor.	Static, Relative, Absolute, Fixed and Sticky
`position: fixed`	Usually positions relative to the viewport; certain ancestors such as transformed elements can change the containing block.	Static, Relative, Absolute, Fixed and Sticky
`position: relative`	Can offset a box and establish a containing block for absolute children.	Static, Relative, Absolute, Fixed and Sticky
`position: sticky`	Sticks at an inset within its scrolling context and containing block.	Static, Relative, Absolute, Fixed and Sticky
`prefers-color-scheme`	Detects a user preference for light or dark color schemes.	Dark Mode, User Preferences and Print CSS
`prefers-reduced-motion`	A media feature for a user preference to reduce motion.	Transforms and Transitions
`prefers-reduced-motion`	Detects a preference to minimize non-essential motion.	Dark Mode, User Preferences and Print CSS
`property: value;`	A declaration, such as font-size: 20px;.	CSS Syntax and Comments
`px`	A CSS pixel, useful for borders and small fixed details.	CSS Units and Sizing Values
`radial-gradient()`	Creates color stops radiating from a center.	Color Formats, Gradients and Transparency
`rem`	Relative to the root element font size.	CSS Units and Sizing Values
`repeat()`	Repeats a track definition.	CSS Grid Layout
`resize`	Allows resizing in specified directions when applicable.	Cursor, Pointer Events, Selection and Resize
`revert / revert-layer`	Roll back to an earlier cascade origin or layer, respectively.	Cascade Layers and Global Keywords
`rgb()`	Describes red, green, and blue channels; an optional slash sets alpha.	Color Formats, Gradients and Transparency
`rotateX() / rotateY()`	Rotate around horizontal or vertical axes.	Transform Origin, 3D Transforms and Perspective
`row-gap / column-gap`	Set the gutters in each direction.	Flex Direction, Wrapping and Alignment
`scale() / rotate()`	Resize or rotate the painted element.	Transforms and Transitions
`scroll-behavior`	smooth requests animated programmatic or anchor scrolling; auto leaves it immediate.	Scroll Behavior, Snap and Overscroll
`scroll-margin-top`	Adds an outset to a target scroll area so it can stop below a sticky header.	Scroll Behavior, Snap and Overscroll
`scroll-padding / scroll-margin`	Reserve inset space for scrolling targets on the container or target.	Scroll Behavior, Snap and Overscroll
`scroll-padding-top`	Reserves space at the top of the scrollport when scrolling targets into view.	Scroll Behavior, Snap and Overscroll
`scroll-snap-align`	Defines where a child snaps inside the snapport.	Scroll Behavior, Snap and Overscroll
`scroll-snap-type`	Chooses a snap axis and strictness on a scroll container.	Scroll Behavior, Snap and Overscroll
`scrollbar-color`	Sets thumb and track colors where supported; retain sufficient contrast and avoid overriding forced-color user choices.	Scroll Behavior, Snap and Overscroll
`scrollbar-gutter`	stable reserves room for classic scrollbars to reduce width shifts. Overlay scrollbars do not consume such a gutter.	Scroll Behavior, Snap and Overscroll
`scrollbar-width`	Requests auto, thin, or none scrollbar sizing where supported; preserve an obvious way to scroll.	Scroll Behavior, Snap and Overscroll
`selector`	Chooses the elements to style, such as p or .note.	CSS Syntax and Comments
`source order`	A later declaration wins when competing declarations have equal cascade priority and specificity.	Cascade, Specificity and Inheritance
`specificity`	ID selectors outweigh classes; classes outweigh element selectors when other cascade factors tie.	Cascade, Specificity and Inheritance
`src`	An @font-face descriptor listing local font names or font resource URLs. It is not a normal element styling property.	Font Styles, Shorthand and Web Fonts
`style attribute`	Inline CSS belongs directly to one HTML element.	Inline, Internal and External CSS
`style element`	Contains stylesheet rules in the document head. The examples place the editable rules here.	Inline, Internal and External CSS
`Styles panel`	DevTools shows matched rules and crossed-out declarations.	Debugging CSS and Common Mistakes
`styles.css`	A separate CSS file loaded by the HTML page.	CSS Practice Tools: VS Code and Live Server
`subgrid`	Lets a nested grid reuse tracks of its parent along the selected axis.	Grid Auto Placement, Alignment and Subgrid
`svh / lvh / dvh`	Use the small, large, or dynamic viewport height, useful around mobile browser interface changes.	Viewport Units, Container Units and Size Limits
`syntax`	An @property descriptor such as `"<color>"` describing accepted values.	Variable Fallbacks and Property Registration
`table-layout`	auto uses content-sensitive sizing; fixed uses the table width and early column information.	Table Layout, Cell Spacing and Captions
`text-align`	start and end follow inline direction; left, right, center, and justify control inline content alignment.	Text Direction, Decoration Styles and Selection
`text-align / text-decoration`	Control inline content alignment and decorations such as underlines.	Fonts and Text
`text-align-last`	Controls alignment of the last line or a line before a forced break.	Text Direction, Decoration Styles and Selection
`text-decoration-color / text-decoration-thickness / text-underline-offset`	Control the appearance and placement of an underline.	Text Spacing, Decoration and Effects
`text-decoration-line`	Chooses underline, overline, line-through, or none.	Text Direction, Decoration Styles and Selection
`text-decoration-style`	Chooses solid, double, dotted, dashed, or wavy decoration lines.	Text Direction, Decoration Styles and Selection
`text-indent`	Indents the first formatted line of a block.	Text Spacing, Decoration and Effects
`text-overflow`	ellipsis indicates clipped inline text when the required overflow conditions are met.	White Space, Wrapping and Text Overflow
`text-shadow`	Paints a shadow behind text.	Text Spacing, Decoration and Effects
`text-transform`	Changes visual capitalization.	Text Spacing, Decoration and Effects
`text-wrap`	Controls line wrapping; balance tries to make short blocks more even, while wrap allows ordinary wrapping. Treat enhanced wrapping as optional.	White Space, Wrapping and Text Overflow
`th scope="col"`	An HTML table header associated with its column.	Styling Forms and Tables
`top / right / bottom / left`	Physical offsets for a positioned element. They do not move a position: static box.	Position Offsets and Inset Properties
`top / right / inset`	Set offsets for positioned boxes.	Static, Relative, Absolute, Fixed and Sticky
`transform / opacity`	A non-none transform or opacity below 1 can also create a stacking context.	Z-Index and Stacking Contexts
`transform-origin`	Sets the pivot point for transforms.	Transform Origin, 3D Transforms and Perspective
`transform-style`	preserve-3d lets descendants retain their 3D positions.	Transform Origin, 3D Transforms and Perspective
`transform: translateY()`	Visually moves an element vertically without reserving new layout space.	Transforms and Transitions
`transition`	Defines which property changes animate and for how long.	Transforms and Transitions
`transition-delay / transition-timing-function`	Set the waiting time and interpolation curve.	Transition and Animation Longhands
`transition-property / transition-duration`	Choose which properties interpolate and for how long.	Transition and Animation Longhands
`translate / rotate / scale`	Individual transform properties that can be set separately.	Transform Origin, 3D Transforms and Perspective
`unicode-bidi`	Controls bidirectional embedding or isolation; HTML bdi and dir are usually better for content semantics.	Text Direction, Decoration Styles and Selection
`universal selector *`	Matches elements; combine with pseudo-elements for a box-sizing reset.	Resets, Reusable Components and CSS Organization
`unset`	Acts like inherit for inherited properties and initial otherwise.	Cascade Layers and Global Keywords
`user-select`	Controls text selection behavior, such as text, none, or all.	Cursor, Pointer Events, Selection and Resize
`var()`	Reads a custom property; var(--accent, blue) uses blue when --accent is missing or has a guaranteed-invalid value.	Variable Fallbacks and Property Registration
`vertical-align`	Aligns content inside table cells; also affects inline-level alignment, but does not center arbitrary block content.	Table Layout, Cell Spacing and Captions
`viewport meta`	The HTML meta tag makes the layout viewport match device width on mobile.	Responsive Design and Media Queries
`visibility: hidden / opacity: 0`	Both preserve space; opacity alone does not disable focus, clicks, or accessibility exposure.	Display, Visibility and Opacity
`vmin / vmax`	One percent of the smaller or larger viewport dimension.	Viewport Units, Container Units and Size Limits
`VS Code`	A code editor for creating files and editing HTML and CSS.	CSS Practice Tools: VS Code and Live Server
`vw / vh`	One percent of viewport width / height. dvh tracks the dynamic viewport height.	CSS Units and Sizing Values
`white-space`	normal collapses whitespace; pre preserves it; pre-wrap preserves it while allowing wrapping.	White Space, Wrapping and Text Overflow
`width`	Requests the box width. auto lets layout determine it; lengths such as 240px and percentages such as 80% are common. In ordinary block layout, percentage width relates to the containing block width.	Width, Height and Overflow
`will-change`	Hints at expected changes; excessive hints can waste memory and resources.	Containment and Rendering Performance
`word-break`	Controls word-breaking rules; break-all can break between letters.	White Space, Wrapping and Text Overflow
`word-spacing`	Changes spacing between words.	Text Spacing, Decoration and Effects
`writing-mode`	Controls horizontal or vertical text flow.	Logical Properties and Writing Modes
`z-index`	Sets stack level for positioned elements and flex or grid items.	Z-Index and Stacking Contexts

Further Reference

MDN CSS reference lists the wider CSS language, including property syntax and compatibility details.

← Project: Responsive Profile Card