initial
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
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
initial |
1 |
13 |
19
1-24
|
No |
15 |
1.2 |
1 |
18 |
19
4-24
|
14 |
1 |
1.0 |
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.
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/initial