# CSS properties A to Z

CSS properties A to Z: 81 terms, each with what it does and a link to its full page.

Updated: October 29, 2026

A **property** is one thing about an element that CSS can change: its color, its size, the space around it, how its children line up. You write the property, a colon and a value: `color: navy`.

Here is every CSS property in the glossary, A to Z, with an example of how it's written in the Syntax column. Pick a letter to jump down the list, or pick a property to read its full page.

## A

- [Align content](https://www.ask-codey.com/glossary/align-content), `align-content: space-between`: Spaces out the rows of wrapped items.
- [Align items](https://www.ask-codey.com/glossary/align-items), `align-items: center`: Lines items up along the cross axis, like centered.
- [Align self](https://www.ask-codey.com/glossary/align-self), `align-self: flex-end`: Lets one item align differently from the others.
- [all property](https://www.ask-codey.com/glossary/all-property), `all: unset`: Resets every property of an element at once.
- [Animation fill mode](https://www.ask-codey.com/glossary/animation-fill-mode), `animation-fill-mode: forwards`: Decides what an element looks like before and after an animation.
- [Animation iteration count](https://www.ask-codey.com/glossary/animation-iteration-count), `animation-iteration-count: 3`: Sets how many times an animation plays.
- [Animation name](https://www.ask-codey.com/glossary/animation-name), `animation-name: fade-in`: Picks which @keyframes animation to play.
- [Aspect ratio](https://www.ask-codey.com/glossary/aspect-ratio), `aspect-ratio: 16 / 9`: Keeps width and height in proportion, like 16/9.

## B

- [Background color](https://www.ask-codey.com/glossary/background-color), `background-color: tomato`: Fills an element's background with a color.
- [Background image](https://www.ask-codey.com/glossary/background-image), `background-image: url("beach.jpg")`: Puts an image or gradient behind an element's content.
- [Background position](https://www.ask-codey.com/glossary/background-position), `background-position: center`: Sets where a background image sits.
- [Background repeat](https://www.ask-codey.com/glossary/background-repeat), `background-repeat: no-repeat`: Decides whether a background image tiles.
- [Background size](https://www.ask-codey.com/glossary/background-size), `background-size: cover`: Sets how big a background image is, like cover.
- [Border](https://www.ask-codey.com/glossary/border), `border: 1px solid gray`: Draws a line around an element: width, style, color.
- [Border radius](https://www.ask-codey.com/glossary/border-radius), `border-radius: 8px`: Rounds an element's corners.
- [Box shadow](https://www.ask-codey.com/glossary/box-shadow), `box-shadow: 0 2px 6px gray`: Draws a shadow around an element.
- [Box sizing](https://www.ask-codey.com/glossary/box-sizing), `box-sizing: border-box`: Decides whether width includes padding and border.

## C

- [Clear](https://www.ask-codey.com/glossary/clear), `clear: both`: Moves an element below any floats instead of wrapping around them.
- [Color](https://www.ask-codey.com/glossary/color), `color: navy`: The color property sets text color; colors can be names, hex or rgb().
- [Column count](https://www.ask-codey.com/glossary/column-count), `column-count: 3`: Sets how many columns text flows into.
- [Column span](https://www.ask-codey.com/glossary/column-span), `column-span: all`: Makes an element stretch across all the columns.
- [Column width](https://www.ask-codey.com/glossary/column-width), `column-width: 200px`: Sets an ideal column width; the browser fits as many as it can.
- [`contain-intrinsic-size`](https://www.ask-codey.com/glossary/contain-intrinsic-size), `contain-intrinsic-size: auto 500px`: A placeholder size for skipped content, so scrolling doesn't jump.
- [Container name](https://www.ask-codey.com/glossary/container-name), `container-name: sidebar`: Names a query container so queries can target it.
- [Container type](https://www.ask-codey.com/glossary/container-type), `container-type: inline-size`: Turns an element into a query container.
- [`content-visibility`](https://www.ask-codey.com/glossary/content-visibility), `content-visibility: auto`: Lets the browser skip rendering off-screen sections.

## D

- [display: none](https://www.ask-codey.com/glossary/display-none), `display: none`: Hides an element completely; it takes no space.

## F

- [Flex basis](https://www.ask-codey.com/glossary/flex-basis), `flex-basis: 200px`: A flex item's starting size before growing or shrinking.
- [Flex direction](https://www.ask-codey.com/glossary/flex-direction), `flex-direction: column`: Sets whether flex items run in a row or a column.
- [Flex flow](https://www.ask-codey.com/glossary/flex-flow), `flex-flow: row wrap`: Sets flex-direction and flex-wrap together.
- [Flex grow](https://www.ask-codey.com/glossary/flex-grow), `flex-grow: 1`: How much leftover space a flex item takes.
- [Flex shorthand](https://www.ask-codey.com/glossary/flex-shorthand), `flex: 1 1 200px`: Sets grow, shrink and basis at once, like flex: 1.
- [Flex shrink](https://www.ask-codey.com/glossary/flex-shrink), `flex-shrink: 0`: How much a flex item shrinks when space is short.
- [Flex wrap](https://www.ask-codey.com/glossary/flex-wrap), `flex-wrap: wrap`: Lets flex items wrap onto new lines instead of squashing.
- [Float](https://www.ask-codey.com/glossary/float), `float: left`: Pushes an element left or right with text wrapping around it.
- [Font family](https://www.ask-codey.com/glossary/font-family), `font-family: Georgia, serif`: Picks the typeface, with fallbacks.
- [Font size](https://www.ask-codey.com/glossary/font-size), `font-size: 1.25rem`: Sets how big the text is.
- [Font weight](https://www.ask-codey.com/glossary/font-weight), `font-weight: bold`: Sets how thick the text is, like bold or 700.

## G

- [Gap](https://www.ask-codey.com/glossary/gap), `gap: 16px`: Sets the space between flex or grid items.
- [Grid area](https://www.ask-codey.com/glossary/grid-area), `grid-area: sidebar`: A rectangle of grid cells, often named.
- [Grid auto flow](https://www.ask-codey.com/glossary/grid-auto-flow), `grid-auto-flow: dense`: Decides how unplaced items fill the grid.
- [Grid template areas](https://www.ask-codey.com/glossary/grid-template-areas), `grid-template-areas: "head head"`: Draws a grid layout with named areas, row by row.
- [Grid template columns](https://www.ask-codey.com/glossary/grid-template-columns), `grid-template-columns: 1fr 2fr`: Sets a grid's columns and their widths.
- [Grid template rows](https://www.ask-codey.com/glossary/grid-template-rows), `grid-template-rows: auto 1fr`: Sets a grid's rows and their heights.

## H

- [Height](https://www.ask-codey.com/glossary/height), `height: 300px`: Sets how tall an element is.

## I

- [Inset](https://www.ask-codey.com/glossary/inset), `inset: 0`: Sets top, right, bottom and left at once.

## J

- [Justify content](https://www.ask-codey.com/glossary/justify-content), `justify-content: space-between`: Spreads items along the main axis: start, center, space-between.

## L

- [Letter spacing](https://www.ask-codey.com/glossary/letter-spacing), `letter-spacing: 0.05em`: Adds or removes space between letters.
- [Line height](https://www.ask-codey.com/glossary/line-height), `line-height: 1.5`: Sets the space between lines of text.
- [List style](https://www.ask-codey.com/glossary/list-style), `list-style: none`: Sets or removes list bullets and numbers.

## M

- [Margin](https://www.ask-codey.com/glossary/margin), `margin: 0 auto`: Space outside an element's border that pushes neighbors away.
- [Maximum size](https://www.ask-codey.com/glossary/maximum-size), `max-width: 600px`: max-width and max-height stop an element growing past a size.
- [Minimum size](https://www.ask-codey.com/glossary/minimum-size), `min-width: 120px`: min-width and min-height stop an element getting smaller than a size.

## O

- [`object-fit`](https://www.ask-codey.com/glossary/object-fit), `object-fit: cover`: Decides how an image fills its box, like cover or contain.
- [Opacity](https://www.ask-codey.com/glossary/opacity), `opacity: 0.5`: Makes an element see-through, from 0 to 1.
- [Order](https://www.ask-codey.com/glossary/order), `order: 2`: Changes the visual order of items without changing the HTML.
- [Outline](https://www.ask-codey.com/glossary/outline), `outline: 2px solid blue`: A line around an element that takes up no space, used for focus rings.
- [Overflow](https://www.ask-codey.com/glossary/overflow), `overflow: hidden`: Decides what happens when content doesn't fit: show, hide or scroll.

## P

- [Padding](https://www.ask-codey.com/glossary/padding), `padding: 16px`: Space inside an element, between its content and border.
- [Place content](https://www.ask-codey.com/glossary/place-content), `place-content: center`: Sets align-content and justify-content together.
- [Place items](https://www.ask-codey.com/glossary/place-items), `place-items: center`: Sets align-items and justify-items together.
- [Place self](https://www.ask-codey.com/glossary/place-self), `place-self: end`: Sets align-self and justify-self together for one item.

## R

- [Rotate](https://www.ask-codey.com/glossary/rotate), `rotate: 45deg`: Turns an element around a point.

## S

- [Scale](https://www.ask-codey.com/glossary/scale), `scale: 1.2`: Makes an element look bigger or smaller.
- [Scroll margin](https://www.ask-codey.com/glossary/scroll-margin), `scroll-margin-top: 80px`: Leaves space around an element when scrolled to it.
- [Scroll padding](https://www.ask-codey.com/glossary/scroll-padding), `scroll-padding-top: 80px`: Space inside a scroll area that scrolled-to items stay clear of.

## T

- [Text alignment](https://www.ask-codey.com/glossary/text-alignment), `text-align: center`: Lines text up left, right or center.
- [Text decoration](https://www.ask-codey.com/glossary/text-decoration), `text-decoration: underline`: Adds or removes lines on text, like underlines.
- [Text transform](https://www.ask-codey.com/glossary/text-transform), `text-transform: uppercase`: Changes how text is capitalized when shown.
- [Transform](https://www.ask-codey.com/glossary/transform), `transform: rotate(45deg)`: Moves, rotates or scales an element without affecting layout.
- [Transform origin](https://www.ask-codey.com/glossary/transform-origin), `transform-origin: top left`: Sets the point an element rotates or scales around.
- [Transition](https://www.ask-codey.com/glossary/transition), `transition: color 0.3s ease`: Makes a property change smoothly instead of jumping.
- [Transition duration](https://www.ask-codey.com/glossary/transition-duration), `transition-duration: 0.3s`: Sets how long a transition takes.
- [Transition property](https://www.ask-codey.com/glossary/transition-property), `transition-property: opacity`: Says which properties animate when they change.
- [Translate](https://www.ask-codey.com/glossary/translate-css), `translate: 10px 20px`: Slides an element from where it sits.

## V

- [Visibility](https://www.ask-codey.com/glossary/visibility), `visibility: hidden`: Makes an element invisible but keeps its space.

## W

- [White space](https://www.ask-codey.com/glossary/white-space), `white-space: nowrap`: Controls how spaces and line breaks are shown, and wrapping.
- [Width](https://www.ask-codey.com/glossary/width), `width: 50%`: Sets how wide an element is.
- [`will-change`](https://www.ask-codey.com/glossary/will-change), `will-change: transform`: Warns the browser a property is about to animate.
- [Writing mode](https://www.ask-codey.com/glossary/writing-mode), `writing-mode: vertical-rl`: Sets which way text flows: across or down.

## Z

- [Z-index](https://www.ask-codey.com/glossary/z-index), `z-index: 10`: Decides which overlapping elements sit in front.

[Every CSS term, by level](https://www.ask-codey.com/glossary/subjects/css)

Source: https://www.ask-codey.com/glossary/reference/css/properties