The initial
CSS keyword applies the initial (or default) value of a property to an element. It can be applied to any CSS property. This includes the CSS shorthand all
, with which initial
can be used to restore all CSS properties to their initial state.
On inherited properties, the initial value may be unexpected. You should consider using the inherit
, unset
, or revert
keywords instead.
Examples
Using initial to reset color for an element
HTML
<p> <span>This text is red.</span> <em>This text is in the initial color (typically black).</em> <span>This is red again.</span> </p>
CSS
p { color: red; } em { color: initial; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Cascading and Inheritance Level 4 The definition of 'initial' in that specification. |
Candidate Recommendation | No changes from Level 3. |
CSS Cascading and Inheritance Level 3 The definition of 'initial' in that specification. |
Candidate Recommendation | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
initial | Chrome Full support 1 | Edge Full support 13 | Firefox
Full support
19
| IE No support No | Opera Full support 15 | Safari Full support 1.2 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android
Full support
19
| Opera Android Full support 14 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
- No support
- No support
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.
See also
- Use
unset
to set a property to its inherited value if it inherits, or to its initial value if not. - Use
revert
to reset a property to the value established by the user-agent stylesheet (or by user styles, if any exist). - Use
inherit
to make an element's property the same as its parent. - The
all
property lets you reset all properties to their initial, inherited, reverted, or unset state at once.