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 4The definition of 'initial' in that specification. | Candidate Recommendation | No changes from Level 3. |
CSS Cascading and Inheritance Level 3The 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.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
initial
|
Chrome
Full support 1 |
Edge
Full support 13 |
Firefox Full support 19 Full support 19 No support 1 — 24 Prefixed' Implemented with the vendor prefix: -moz- |
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 Full support 19 No support 4 — 24 Prefixed' Implemented with the vendor prefix: -moz- |
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.
initial by Mozilla Contributors is licensed under CC-BY-SA 2.5.