CSS References
CSS Default Values
Every CSS property has an initial (default) value that applies when you do not set it and it is not inherited. Browsers also apply their own user-agent stylesheet on top, which is why an <h1> looks big and bold before you touch it. This reference lists the CSS-defined initial values of common properties, plus which properties inherit.
Initial values of common properties
| Property | Initial value |
|---|---|
| display | inline |
| position | static |
| float | none |
| width | auto |
| height | auto |
| margin | 0 |
| padding | 0 |
| border-width | medium |
| border-style | none |
| box-sizing | content-box |
| color | canvastext (usually black) |
| background-color | transparent |
| background-image | none |
| font-size | medium (~16px) |
| font-weight | normal (400) |
| font-style | normal |
| font-family | depends on browser |
| line-height | normal |
| text-align | start |
| text-decoration | none |
| letter-spacing | normal |
| white-space | normal |
| visibility | visible |
| opacity | 1 |
| overflow | visible |
| z-index | auto |
| top / right / bottom / left | auto |
| flex-direction | row |
| flex-wrap | nowrap |
| justify-content | normal |
| align-items | normal |
| gap | normal (0) |
| list-style-type | disc |
| cursor | auto |
| transition | all 0s ease 0s |
| transform | none |
The user-agent stylesheet often overrides these. For example the CSS initial value of display is inline, but the browser sets display: block on <div> and <p> via its own stylesheet.
Inherited vs non-inherited properties
Some properties are inherited by default — a child uses its parent's value unless overridden. Most inherited properties relate to text; layout properties are not inherited.
| Inherited (text-ish) | Not inherited (layout/box) |
|---|---|
| color | margin / padding |
| font-family, font-size, font-weight | width / height |
| line-height, letter-spacing | border |
| text-align, text-indent | background |
| visibility | display |
| list-style | position, float |
| cursor | box-shadow |
Resetting to defaults
You can force a property back to a defined state with the global keywords initial, inherit, unset, revert and all.
| Keyword | Effect |
|---|---|
| initial | Sets the property to its CSS-defined initial value. |
| inherit | Takes the computed value from the parent. |
| unset | inherit if the property is inherited, else initial. |
| revert | Rolls back to the user-agent (browser) stylesheet value. |
| all: unset | Resets every property on the element at once. |
all: revert on a component wrapper is a quick way to strip inherited styles and start from the browser defaults.