Css Initial Example
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. | Recommendation | Initial definition. |
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.
Comments
Post a Comment