CSS Properties Reference

The CSS properties you actually type every day — display, position, flex, grid, transform, box-shadow — each on its own page with common values, live-ready examples, and the gotcha that trips people up (like z-index only working on positioned elements).

Layout

Sets whether an element is treated as a block or inline box and defines the layout used for its children. It is the single most important property for controlling how boxes participate in the flow.

Determines what happens when content exceeds its box's boundaries. Setting overflow to anything but visible creates a new block formatting context.

Controls whether an element's declared width and height include padding and border. border-box is the modern default most stylesheets set globally.

Flexbox

Shorthand for flex-grow, flex-shrink, and flex-basis on a flex item. Controls how the item grows or shrinks to fill the flex container.

Sets the main axis of a flex container, deciding whether items lay out horizontally or vertically. It also determines which direction items are reversed if needed.

justify-content

Aligns flex or grid items along the main axis, distributing extra space between them. It has no effect if the items already fill the container.

Aligns flex or grid items along the cross axis of their container. It is the counterpart to justify-content and controls vertical alignment in a default row layout.

Shorthand for row-gap and column-gap, setting spacing between flex, grid, or multi-column items. Replaces margin hacks for evenly spacing children.

Grid

grid-template-columns

Defines the number, size, and naming of columns in a grid container. Supports flexible fr units, repeat(), minmax(), and auto-fit/auto-fill for responsive layouts.

Places a grid item into a named template area or into a specific span of rows and columns. It is the shorthand for grid-row-start / grid-column-start / grid-row-end / grid-column-end.

Shorthand for grid-column-start and grid-column-end, controlling how many columns a grid item spans. Accepts line numbers, named lines, or span keywords.

Typography

Sets a prioritized list of typefaces to render text with. The browser walks the list until it finds one that is available, so always end with a generic fallback.

Sets the size of rendered text. Modern designs use rem for accessibility and clamp() for fluid typography that scales with the viewport.

Sets the thickness of glyphs. Numeric weights from 100 to 900 map to Thin through Black; variable fonts accept any integer up to 1000.

Sets the vertical distance between lines of text. Unitless values are preferred because they scale with the element's own font size.

Sets the horizontal alignment of inline content inside a block. start and end respect the writing direction, which is preferred for internationalized sites.

text-decoration

Shorthand for text-decoration-line, style, color, and thickness. Used to add or remove underlines, overlines, and strike-throughs on text.

Color & Background

Sets the foreground text color and inherits by default. Modern browsers support oklch() and color(display-p3) for wider-gamut design systems.

Shorthand for all background-* properties, letting you set color, image, position, size, and repeat in one declaration. Resets any background properties you do not specify to their initial values.

background-image

Sets one or more background images on an element, including URL images and CSS gradients. Multiple layers stack in the order given, with the first painted on top.

Spacing & Sizing

Shorthand for setting outer spacing on all four sides of an element. Accepts lengths, percentages, or the auto keyword for horizontal centering.

Shorthand for inner spacing between an element's content and its border. Padding never collapses and adds to an element's rendered footprint unless box-sizing: border-box is set.

Sets the horizontal size of an element's content box (or border box if box-sizing: border-box). Modern intrinsic keywords give sizing that adapts to content.

Sets the vertical size of an element. Viewport units like vh, dvh, and svh are common for full-screen sections and account for mobile browser chrome.

Caps how wide an element can grow, overriding width when the two conflict. Essential for readable line lengths and responsive containers.

Positioning & Transform

Controls how an element is positioned in the document and whether it participates in normal flow. Non-static values enable top/right/bottom/left offsets and create a positioning context.

Sets the stack order of positioned elements along the z-axis. Higher values are drawn in front of lower ones within the same stacking context.

Applies 2D or 3D transformations like translate, rotate, scale, and skew to an element. Transforms are GPU-accelerated and do not affect surrounding layout.

Effects & Animation

Sets the transparency of an entire element, including its background, borders, and children. Values range from 0 (fully transparent) to 1 (fully opaque).

Adds one or more shadows around an element's box. Multiple comma-separated shadows layer to create depth, glow, or inset effects.

Rounds the corners of an element's border box. Values can be lengths or percentages, and the slash syntax lets you set different horizontal and vertical radii for elliptical corners.

Shorthand that animates changes to specified CSS properties over a duration. It is the simplest way to add polish to hover, focus, and state changes.

Related references