CSS - all
all
The all property resets all properties to their initial or inherited value.
If you add the all property to your element it will reset all the preceding values.
So you could use this as a reset, if you add it at the start of your rules, if you add it towards the end it resets all the ones you have already set.
Property Variable Name
allAvailable Values for all
initial|inherit|unsetExamples Using all values
Example using all initial
Example using all initial
Here is an example using all:initial;
Demo Box 1 Content 1
Demo Box 1 Content 2
Code
<style>
.demo-box-1 {
border-radius:3px;
margin-bottom:10px;
border:1px solid #000;
height:220px;
width:100%;
all:initial;
}
.demo-box-1 span {
display:inline-block;
padding:10px;
background:#3b7aa0;
color:#FFF;
margin:0 1%;
all:initial;
}
</style>
<h2>Example using all initial</h2>
<p>Here is an example using <code>all:initial;</code></p>
<div class='demo-box-1'>
<span>Demo Box 1 Content 1</span>
<span>Demo Box 1 Content 2</span>
</div>Example using all inherit
Example using all inherit
Here is an example using all:inherit;
Demo Box 2 Content 1
Demo Box 2 Content 2
Code
<style>
.demo-box-2 {
border-radius:3px;
margin-bottom:10px;
border:1px solid #000;
height:220px;
width:100%;
all:inherit;
}
.demo-box-2 span {
display:inline-block;
padding:10px;
background:#3b7aa0;
color:#FFF;
margin:0 1%;
all:inherit;
}
</style>
<h2>Example using all inherit</h2>
<p>Here is an example using <code>all:inherit;</code></p>
<div class='demo-box-2'>
<span>Demo Box 2 Content 1</span>
<span>Demo Box 2 Content 2</span>
</div>Example using all unset
Example using all unset
Here is an example using all:unset;
Demo Box 3 Content 1
Demo Box 3 Content 2
Code
<style>
.demo-box-3 {
border-radius:3px;
margin-bottom:10px;
border:1px solid #000;
height:220px;
width:100%;
all:unset;
}
.demo-box-3 span {
display:inline-block;
padding:10px;
background:#3b7aa0;
color:#FFF;
margin:0 1%;
all:unset;
}
</style>
<h2>Example using all unset</h2>
<p>Here is an example using <code>all:unset;</code></p>
<div class='demo-box-3'>
<span>Demo Box 3 Content 1</span>
<span>Demo Box 3 Content 2</span>
</div>