all
Resets all CSS properties of an element at once. A powerful property for completely resetting external or inherited styles.
Class List
| Class | CSS | Description |
|---|---|---|
alli | all: initial | Resets all properties to CSS spec initial values |
allinh | all: inherit | Inherits all properties from parent |
allun | all: unset | Inherited properties get inherit, non-inherited get initial |
allr | all: revert | Restores to browser default stylesheet values |
Value Comparison
| Value | Inherited properties | Non-inherited properties |
|---|---|---|
initial | Initial value (ignores inheritance) | Initial value |
inherit | Inherits parent value | Inherits parent value (forced) |
unset | Inherits parent value | Initial value |
revert | Browser default | Browser default |
Usage Examples
<!-- Reset external library styles -->
<div class="third-party-widget alli">
<p class="db cFAFAFA fs16px">All styles reset, only Atomic CSS applied</p>
</div>
<!-- Restore browser default styles -->
<div class="allr">
<h1>Browser default h1 style applied</h1>
<p>Browser default p style applied</p>
</div>
<!-- Fully inherit parent styles -->
<div class="cFAFAFA fs16px">
<span class="allinh">Inherits all parent color, font-size, etc.</span>
</div>Tips & Notes
Use with caution
all resets all properties including display, position, etc. Re-set needed properties after reset.
revert is safest
allr (revert) returns to browser defaults so div stays block and span stays inline. Most predictable results.