CSS References
CSS Reference
This CSS reference is a master table of the properties you reach for most often when styling real web pages. Properties are grouped by purpose — text and fonts, the box model, colours and backgrounds, layout with Flexbox and Grid, positioning, transforms, transitions and more — so you can scan a category and find the right tool quickly. Every property listed here is widely supported in modern browsers.
How to read a CSS property
Every CSS rule is made of a selector and a declaration block. Inside the block you write declarations, and each declaration is a property followed by a colon and a value, ending in a semicolon. The property name decides what visual aspect you are changing; the value decides how. The tables below list the property and describe what it does — pair them with the value guides on units, colours and functions to write complete declarations.
selector {
property: value; /* one declaration */
color: #0f766e; /* text colour */
padding: 16px; /* inner spacing */
}Use shorthand properties (margin, padding, background, font, border) to set several related values in one line. Longhand properties (margin-top, background-color) give you finer control when you need it.
Text and font properties
These properties control how text looks: its typeface, size, weight, spacing, alignment and decoration.
| Property | Description |
|---|---|
| color | Sets the colour of the text. |
| font-family | Specifies the typeface, with fallbacks (a font stack). |
| font-size | Sets the size of the text, e.g. 16px or 1rem. |
| font-weight | Sets how bold text is (normal, bold, 100–900). |
| font-style | Sets italic or oblique text. |
| line-height | Sets the height of each line of text (spacing between lines). |
| letter-spacing | Adjusts space between characters. |
| word-spacing | Adjusts space between words. |
| text-align | Aligns inline content: left, right, center or justify. |
| text-decoration | Adds underline, overline, line-through or none. |
| text-transform | Changes case: uppercase, lowercase or capitalize. |
| text-indent | Indents the first line of a block of text. |
| text-shadow | Adds a shadow behind text. |
| white-space | Controls how whitespace and line breaks are handled. |
| text-overflow | Sets how clipped text is signalled, e.g. ellipsis. |
| vertical-align | Aligns inline or table-cell content vertically. |
Box model properties
The box model describes the rectangular boxes generated for every element: content, padding, border and margin. These properties size and space those boxes.
| Property | Description |
|---|---|
| width | Sets the content width of an element. |
| height | Sets the content height of an element. |
| max-width | Limits how wide an element can grow. |
| min-width | Sets the smallest width an element may shrink to. |
| max-height | Limits how tall an element can grow. |
| min-height | Sets the smallest height an element may shrink to. |
| margin | Space outside the border (shorthand for all four sides). |
| padding | Space inside the border, around the content. |
| border | Shorthand for border width, style and colour. |
| border-radius | Rounds the corners of the box. |
| box-sizing | Controls whether width/height include padding and border. |
| outline | A line drawn outside the border; does not affect layout. |
| overflow | Controls content that overflows: visible, hidden, scroll, auto. |
| box-shadow | Adds one or more shadows around the box. |
Set box-sizing: border-box on everything (often via *) so width and height include padding and border. It makes layouts far more predictable.
Background and colour properties
| Property | Description |
|---|---|
| background | Shorthand for all background properties. |
| background-color | Sets a solid background colour. |
| background-image | Sets one or more background images or gradients. |
| background-size | Sizes the background image: cover, contain or a length. |
| background-position | Positions the background image within the box. |
| background-repeat | Controls tiling: repeat, no-repeat, repeat-x/y. |
| background-attachment | Fixes the background to the viewport or scrolls it. |
| opacity | Sets the transparency of the whole element (0–1). |
| filter | Applies graphical effects like blur() or brightness(). |
| mix-blend-mode | Blends an element with the content behind it. |
Layout: display, position and float
| Property | Description |
|---|---|
| display | Sets the box type: block, inline, flex, grid, none, etc. |
| position | Sets positioning scheme: static, relative, absolute, fixed, sticky. |
| top / right / bottom / left | Offsets a positioned element from its containing block. |
| z-index | Sets stack order of positioned/flex/grid items. |
| float | Floats an element left or right; text wraps around it. |
| clear | Prevents an element from sitting beside a float. |
| visibility | Shows or hides an element while keeping its space. |
| object-fit | How replaced content (img/video) fills its box. |
| aspect-ratio | Sets a preferred width-to-height ratio for the box. |
Flexbox properties
| Property | Description |
|---|---|
| flex-direction | Main axis direction: row, row-reverse, column, column-reverse. |
| flex-wrap | Whether items wrap onto multiple lines. |
| justify-content | Aligns items along the main axis. |
| align-items | Aligns items along the cross axis. |
| align-content | Aligns wrapped lines within the container. |
| gap | Sets spacing between flex (or grid) items. |
| flex-grow | How much an item grows relative to siblings. |
| flex-shrink | How much an item shrinks relative to siblings. |
| flex-basis | The initial main size of a flex item. |
| order | Reorders a flex/grid item without changing HTML. |
| align-self | Overrides align-items for a single item. |
Grid properties
| Property | Description |
|---|---|
| grid-template-columns | Defines the column tracks of the grid. |
| grid-template-rows | Defines the row tracks of the grid. |
| grid-template-areas | Names areas for a visual layout map. |
| grid-column | Places an item across columns (start / end). |
| grid-row | Places an item across rows (start / end). |
| grid-auto-flow | How auto-placed items fill the grid. |
| grid-auto-rows | Size of implicitly created rows. |
| place-items | Shorthand for align-items and justify-items. |
| place-content | Shorthand for align-content and justify-content. |
Transitions, transforms and animation
| Property | Description |
|---|---|
| transition | Shorthand to animate property changes over time. |
| transition-property | Which properties to animate. |
| transition-duration | How long the transition takes. |
| transition-timing-function | The easing curve, e.g. ease, linear, cubic-bezier(). |
| transform | Applies translate, rotate, scale or skew. |
| transform-origin | The point transforms are applied around. |
| animation | Shorthand to run a @keyframes animation. |
| animation-name | The @keyframes rule to run. |
| animation-duration | How long one cycle of the animation lasts. |
| animation-iteration-count | How many times the animation runs. |
| will-change | Hints to the browser which properties will change. |
For smooth animation prefer transform and opacity — the browser can animate them on the GPU without triggering layout or paint.
Miscellaneous useful properties
| Property | Description |
|---|---|
| cursor | Sets the mouse cursor, e.g. pointer, text, not-allowed. |
| pointer-events | Controls whether an element responds to the pointer. |
| user-select | Controls whether text can be selected. |
| list-style | Shorthand for list marker type, position and image. |
| content | Inserts generated content with ::before / ::after. |
| scroll-behavior | Enables smooth scrolling for the page or a container. |
| accent-color | Tints form controls like checkboxes and radios. |
| caret-color | Sets the colour of the text-input cursor. |
This list is a starting point, not the whole language. See the dedicated reference pages for selectors, functions, units, colours and at-rules to complete your toolkit.