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
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.
| Term | Syntax | What it does |
|---|---|---|
| A | ||
| Align content | align-content: space-between | Spaces out the rows of wrapped items. |
| Align items | align-items: center | Lines items up along the cross axis, like centered. |
| Align self | align-self: flex-end | Lets one item align differently from the others. |
| all property | all: unset | Resets every property of an element at once. |
| Animation fill mode | animation-fill-mode: forwards | Decides what an element looks like before and after an animation. |
| Animation iteration count | animation-iteration-count: 3 | Sets how many times an animation plays. |
| Animation name | animation-name: fade-in | Picks which @keyframes animation to play. |
| Aspect ratio | aspect-ratio: 16 / 9 | Keeps width and height in proportion, like 16/9. |
| B | ||
| Background color | background-color: tomato | Fills an element's background with a color. |
| Background image | background-image: url("beach.jpg") | Puts an image or gradient behind an element's content. |
| Background position | background-position: center | Sets where a background image sits. |
| Background repeat | background-repeat: no-repeat | Decides whether a background image tiles. |
| Background size | background-size: cover | Sets how big a background image is, like cover. |
| Border | border: 1px solid gray | Draws a line around an element: width, style, color. |
| Border radius | border-radius: 8px | Rounds an element's corners. |
| Box shadow | box-shadow: 0 2px 6px gray | Draws a shadow around an element. |
| Box sizing | box-sizing: border-box | Decides whether width includes padding and border. |
| C | ||
| Clear | clear: both | Moves an element below any floats instead of wrapping around them. |
| Color | color: navy | The color property sets text color; colors can be names, hex or rgb(). |
| Column count | column-count: 3 | Sets how many columns text flows into. |
| Column span | column-span: all | Makes an element stretch across all the columns. |
| Column width | column-width: 200px | Sets an ideal column width; the browser fits as many as it can. |
contain-intrinsic-size | contain-intrinsic-size: auto 500px | A placeholder size for skipped content, so scrolling doesn't jump. |
| Container name | container-name: sidebar | Names a query container so queries can target it. |
| Container type | container-type: inline-size | Turns an element into a query container. |
content-visibility | content-visibility: auto | Lets the browser skip rendering off-screen sections. |
| D | ||
| display: none | display: none | Hides an element completely; it takes no space. |
| F | ||
| Flex basis | flex-basis: 200px | A flex item's starting size before growing or shrinking. |
| Flex direction | flex-direction: column | Sets whether flex items run in a row or a column. |
| Flex flow | flex-flow: row wrap | Sets flex-direction and flex-wrap together. |
| Flex grow | flex-grow: 1 | How much leftover space a flex item takes. |
| Flex shorthand | flex: 1 1 200px | Sets grow, shrink and basis at once, like flex: 1. |
| Flex shrink | flex-shrink: 0 | How much a flex item shrinks when space is short. |
| Flex wrap | flex-wrap: wrap | Lets flex items wrap onto new lines instead of squashing. |
| Float | float: left | Pushes an element left or right with text wrapping around it. |
| Font family | font-family: Georgia, serif | Picks the typeface, with fallbacks. |
| Font size | font-size: 1.25rem | Sets how big the text is. |
| Font weight | font-weight: bold | Sets how thick the text is, like bold or 700. |
| G | ||
| Gap | gap: 16px | Sets the space between flex or grid items. |
| Grid area | grid-area: sidebar | A rectangle of grid cells, often named. |
| Grid auto flow | grid-auto-flow: dense | Decides how unplaced items fill the grid. |
| Grid template areas | grid-template-areas: "head head" | Draws a grid layout with named areas, row by row. |
| Grid template columns | grid-template-columns: 1fr 2fr | Sets a grid's columns and their widths. |
| Grid template rows | grid-template-rows: auto 1fr | Sets a grid's rows and their heights. |
| H | ||
| Height | height: 300px | Sets how tall an element is. |
| I | ||
| Inset | inset: 0 | Sets top, right, bottom and left at once. |
| J | ||
| Justify content | justify-content: space-between | Spreads items along the main axis: start, center, space-between. |
| L | ||
| Letter spacing | letter-spacing: 0.05em | Adds or removes space between letters. |
| Line height | line-height: 1.5 | Sets the space between lines of text. |
| List style | list-style: none | Sets or removes list bullets and numbers. |
| M | ||
| Margin | margin: 0 auto | Space outside an element's border that pushes neighbors away. |
| Maximum size | max-width: 600px | max-width and max-height stop an element growing past a size. |
| Minimum size | min-width: 120px | min-width and min-height stop an element getting smaller than a size. |
| O | ||
object-fit | object-fit: cover | Decides how an image fills its box, like cover or contain. |
| Opacity | opacity: 0.5 | Makes an element see-through, from 0 to 1. |
| Order | order: 2 | Changes the visual order of items without changing the HTML. |
| Outline | outline: 2px solid blue | A line around an element that takes up no space, used for focus rings. |
| Overflow | overflow: hidden | Decides what happens when content doesn't fit: show, hide or scroll. |
| P | ||
| Padding | padding: 16px | Space inside an element, between its content and border. |
| Place content | place-content: center | Sets align-content and justify-content together. |
| Place items | place-items: center | Sets align-items and justify-items together. |
| Place self | place-self: end | Sets align-self and justify-self together for one item. |
| R | ||
| Rotate | rotate: 45deg | Turns an element around a point. |
| S | ||
| Scale | scale: 1.2 | Makes an element look bigger or smaller. |
| Scroll margin | scroll-margin-top: 80px | Leaves space around an element when scrolled to it. |
| Scroll padding | scroll-padding-top: 80px | Space inside a scroll area that scrolled-to items stay clear of. |
| T | ||
| Text alignment | text-align: center | Lines text up left, right or center. |
| Text decoration | text-decoration: underline | Adds or removes lines on text, like underlines. |
| Text transform | text-transform: uppercase | Changes how text is capitalized when shown. |
| Transform | transform: rotate(45deg) | Moves, rotates or scales an element without affecting layout. |
| Transform origin | transform-origin: top left | Sets the point an element rotates or scales around. |
| Transition | transition: color 0.3s ease | Makes a property change smoothly instead of jumping. |
| Transition duration | transition-duration: 0.3s | Sets how long a transition takes. |
| Transition property | transition-property: opacity | Says which properties animate when they change. |
| Translate | translate: 10px 20px | Slides an element from where it sits. |
| V | ||
| Visibility | visibility: hidden | Makes an element invisible but keeps its space. |
| W | ||
| White space | white-space: nowrap | Controls how spaces and line breaks are shown, and wrapping. |
| Width | width: 50% | Sets how wide an element is. |
will-change | will-change: transform | Warns the browser a property is about to animate. |
| Writing mode | writing-mode: vertical-rl | Sets which way text flows: across or down. |
| Z | ||
| Z-index | z-index: 10 | Decides which overlapping elements sit in front. |