CSS all Property

CSS all Property

The all property in CSS is a shorthand that resets or inherits all inheritable and non-inheritable properties of an element in one go.

1. Syntax

selector {
  all: value;
}

2. Accepted Values

Value	Description
initial	Resets all properties to their default browser values.
inherit	Makes all properties inherit from the parent element.
unset	Resets inherited properties to inherit and non-inherited ones to initial.

3. Example – Reset an Element's Styles

.button {
  color: red;
  font-size: 20px;
  background: yellow;
}

.reset {
  all: initial;
}

✅ Applying .reset removes all styles from the element.

4. Example – Inherit All Properties from Parent

.parent {
  color: blue;
  font-size: 18px;
}

.child {
  all: inherit;
}

✅ The .child will inherit all styles from .parent.

5. When to Use all?

✔ Resetting styles of third-party components
✔ Ensuring a clean slate for a specific element
✔ Preventing conflicts with global styles

6. Best Practices

⚠ Avoid using all: initial; on body or global elements to prevent breaking layouts.
⚡ Use all: unset; for more predictable behavior.