CSS Properties
CSS properties are how you style a page: each one sets a single aspect of an element's appearance or layout, like its text color, spacing or position. All 54 properties below link to a full reference with its accepted values, syntax and a live example you can edit in the browser.
| Name | Description |
|---|---|
| accent-color | Tints built-in form controls — checkboxes, radio buttons, range sliders and progress bars — to match your brand color. |
| align-items | Aligns items along the cross axis of a flex or grid container — most often used to center them vertically. |
| align-self | Overrides the container's align-items value for a single flex or grid item, setting its own cross-axis alignment. |
| animation | Runs a @keyframes animation on an element — a shorthand for its name, duration, easing, delay, repeat count and more. |
| aspect-ratio | Sets a preferred width-to-height ratio for an element, so its height follows its width automatically. |
| background | Shorthand for an element's background layers — color, image, gradient, position, size and repeat — in one declaration. |
| background-color | Fills the background of an element with a solid color, painted behind the content and padding but inside the border. |
| border | Draws a line around an element. A shorthand for the border width, style and color on all four sides. |
| border-radius | Rounds the corners of an element's box. A shorthand for the four corner radii; 50% makes a circle or ellipse. |
| box-shadow | Adds one or more shadows around an element's box, set by horizontal and vertical offset, blur, spread and color. |
| box-sizing | Controls whether an element's width and height include its padding and border, or just the content. |
| color | Sets the color of an element's text. It is inherited, so it flows down to child elements unless they override it. |
| cursor | Sets the mouse cursor shown when the pointer is over an element — pointer, text, not-allowed, grab and more. |
| display | Controls how an element generates its box and how its children are laid out — block, inline, flex, grid and more. |
| filter | Applies graphical effects like blur, brightness, contrast and grayscale to an element and its contents. |
| flex | Shorthand on a flex item for how it grows, shrinks and what size it starts from. Sets flex-grow, flex-shrink and flex-basis. |
| flex-direction | Sets the main axis of a flex container — whether its items flow in a row or a column, and in which order. |
| flex-wrap | Controls whether flex items are forced onto one line or allowed to wrap onto multiple lines when space runs out. |
| float | Pushes an element to the left or right of its container so that text and inline content flow around it. |
| font-family | Sets the typeface for an element's text, given as a prioritized list of fonts with a generic family as a fallback. |
| font-size | Sets the size of an element's text. Inherited, and best expressed in rem so it respects the user's browser settings. |
| font-weight | Sets how bold or light text appears, using keywords like bold or numeric weights from 100 to 900. |
| gap | Sets the space between rows and columns in a flex, grid or multi-column container. A shorthand for row-gap and column-gap. |
| grid-template-columns | Defines the columns of a CSS grid — how many there are and how wide each one is, using lengths, fr units, repeat() and minmax(). |
| height | Sets the height of an element's content area. Usually best left to auto so the element grows to fit its content. |
| justify-content | Aligns items along the main axis of a flex or grid container and decides how any spare space is shared out. |
| letter-spacing | Adjusts the horizontal space between characters (tracking). Accepts positive values to open text up or negative to tighten it. |
| line-height | Sets the height of each line of text, controlling the vertical spacing between lines. Best given as a unitless number. |
| list-style | Shorthand for a list item's marker — its type (bullet or number), position, and an optional image. Set to none to remove markers. |
| margin | Sets the space outside an element, pushing its neighbors away. A shorthand for margin-top, margin-right, margin-bottom and margin-left. |
| max-width | Sets the maximum width an element can grow to. The backbone of responsive containers and readable line lengths. |
| min-height | Sets the minimum height of an element. It can grow taller than this, but never shorter — ideal for full-height sections. |
| object-fit | Controls how a replaced element such as an image or video is resized to fill its box, without distorting its aspect ratio. |
| opacity | Sets how opaque an element is, from 1 (solid) to 0 (invisible). Affects the whole element, including its children. |
| order | Changes the visual order of a flex or grid item without changing the HTML source order. |
| outline | Draws a line outside an element's border that does not take up space. Most important as the keyboard focus indicator. |
| overflow | Controls what happens when content is too big for its box — whether it is clipped, scrolls, or spills out visibly. |
| overflow-wrap | Lets long unbreakable strings, such as URLs, break onto the next line to avoid overflowing their container. |
| padding | Sets the space inside an element, between its content and its border. A shorthand for the four padding sides. |
| pointer-events | Controls whether an element responds to mouse and touch events, or lets them pass through to whatever is behind it. |
| position | Sets how an element is positioned in the document — in normal flow, or offset from a reference using top, right, bottom and left. |
| scroll-behavior | Sets whether navigating to an anchor or scrolling programmatically jumps instantly or animates smoothly. |
| text-align | Sets the horizontal alignment of inline content, such as text, within its containing block. |
| text-decoration | Adds or removes lines on text — underline, line-through, overline — and sets their color, style and thickness. |
| text-shadow | Adds one or more shadows behind text, set by horizontal and vertical offset, blur and color. |
| text-transform | Changes the capitalization of text — uppercase, lowercase or capitalize — without altering the underlying content. |
| transform | Visually moves, rotates, scales or skews an element without disturbing the surrounding layout. GPU-accelerated. |
| transition | Animates the change of a property over time when its value changes. A shorthand for property, duration, timing function and delay. |
| user-select | Controls whether the user can select an element's text with the mouse or keyboard. |
| vertical-align | Aligns inline, inline-block and table-cell elements vertically within a line or cell. It does not work on block or flex children. |
| visibility | Shows or hides an element while keeping its space in the layout. Differs from display: none, which removes the box entirely. |
| white-space | Controls how whitespace and line breaks inside an element are handled — whether spaces collapse and whether text wraps. |
| width | Sets the width of an element's content area. Works with min-width and max-width, and with box-sizing to decide what the value includes. |
| z-index | Controls the stacking order of positioned (and flex/grid) elements that overlap — higher values sit in front. |