CSS Reset Values Guide (Inherit, Initial, Unset, & Revert)

Introduction

CSS usually gives each element a final style by combining several things.

Those things include browser defaults, inherited values, your own CSS rules, specificity, source order, and sometimes reset keywords.

Most of the time, you write normal values:

1p {2  color: navy;3}

But CSS also has special keywords that can reset or control how a property gets its value.

The most useful ones are:

1inherit2initial3unset4revert

These are called CSS-wide keywords.

That means they can be used with almost any CSS property.

They are useful when you want to control inheritance, undo a style, reset a property, or return an element closer to its default behaviour.

For example:

1a {2  color: inherit;3}

This tells links to use the same text colour as their parent.

Another example:

1button {2  all: unset;3}

This removes many default button styles.

These keywords are powerful, but they can also be confusing at first.

The key idea is this:

1inherit = use the parent value2initial = use the property’s initial value3unset = inherit if the property normally inherits, otherwise initial4revert = go back to the previous cascade origin, often the browser default

This guide explains what each value does and when to use it.

Why These Values Exist

CSS often has several possible sources for a property value.

For example, a paragraph might get its colour from:

1the browser default2the body element3a class selector4a more specific selector5an inherited parent value

Example:

1body {2  color: #333333;3}4 5.card {6  color: navy;7}8 9.card p {10  color: green;11}

HTML:

1<div class=”card”>2  <p>This paragraph is green.</p>3</div>

The paragraph is inside .card.

It could inherit navy from .card.

But it has a direct rule:

1.card p {2  color: green;3}

So it becomes green.

Sometimes you want to control this process more directly.

You may want an element to:

1copy its parent value2ignore an inherited value3return to a default value4remove framework styling5reset many properties at once

That is where inherit, initial, unset, and revert are useful.

CSS-Wide Keywords

The values inherit, initial, unset, and revert are special keywords.

They are not tied to one specific property.

You can use them on many different properties.

Examples:

1p {2  color: inherit;3}

1.box {2  margin: initial;3}

1button {2  font: unset;3}

1h1 {2  font-size: revert;3}

They work differently from normal values such as:

1color: blue;2padding: 1rem;3display: flex;4font-size: 20px;

Normal values directly choose a specific result.

CSS-wide keywords tell the browser how to choose or reset the value.

The inherit Value

The inherit value tells an element to use the value from its parent.

Example:

1a {2  color: inherit;3}

This means:

1Use the same color as the parent element.

HTML:

1<p class=”notice”>2  Read the <a href=”/guide”>full guide</a>.3</p>

CSS:

1.notice {2  color: darkgreen;3}4 5.notice a {6  color: inherit;7}

The link becomes dark green because it inherits the colour from the paragraph.

Without color: inherit, the link might use the browser’s default link colour.

inherit Is Useful for Links

Links often have browser default styles.

For example, browsers commonly show links as blue and underlined.

That can be useful, but sometimes you want a link to match the surrounding text.

Example:

1.card {2  color: navy;3}4 5.card a {6  color: inherit;7}

HTML:

1<div class=”card”>2  <p>Read the <a href=”/article”>article</a>.</p>3</div>

The link uses the card’s text colour.

This is useful in cards, buttons, navigation menus, and small UI components.

inherit With Buttons and Form Controls

Form controls often have browser-specific default styles.

A button may not automatically use the same font as the rest of your page.

Example:

1body {2  font-family: Arial, sans-serif;3}

HTML:

1<button>Save</button>

The button might not look like it uses the same font in every browser.

A common fix is:

1button,2input,3select,4textarea {5  font: inherit;6}

This tells form controls to inherit font-related settings from their parent.

You may also see:

1button {2  font-family: inherit;3}

or:

1button {2  color: inherit;3}

These are common when building custom form styles.

inherit Can Force Non-Inherited Properties to Inherit

Some properties inherit naturally.

For example:

1color2font-family3font-size4line-height5text-align

Other properties usually do not inherit:

1margin2padding3border4background5width6height7display

But inherit can force a property to inherit.

Example:

1.card {2  border: 2px solid navy;3}4 5.card p {6  border: inherit;7}

Normally, border does not inherit.

But this tells the paragraph to use the same border value as its parent.

This is possible, but it is not common for most layout and box properties.

Usually, properties like border, padding, margin, and width do not inherit because copying them to every child would often create messy layouts.

inherit Example with currentColor

The currentColor keyword uses the current value of the color property.

This works well with inheritance.

Example:

1.card {2  color: teal;3}4 5.card button {6  color: inherit;7  border: 2px solid currentColor;8}

HTML:

1<div class=”card”>2  <button>Save</button>3</div>

The button inherits teal from .card.

The border uses currentColor.

So the button text and border are both teal.

This pattern is useful for icons, borders, and buttons that should match surrounding text.

When to Use inherit

Use inherit when you want an element to intentionally copy a value from its parent.

Good examples:

1a {2  color: inherit;3}

1button {2  font: inherit;3}

1svg {2  fill: currentColor;3}

1input {2  font-family: inherit;3}

Use it when inheritance makes the design more consistent.

Avoid forcing inheritance on layout properties unless you have a clear reason.

This is usually not helpful:

1* {2  padding: inherit;3}

That would make spacing hard to control.

The initial Value

The initial value resets a property to its initial value.

The initial value is the value defined by CSS for that property.

Example:

1p {2  color: initial;3}

This does not mean:

1Use the parent color.

It means:

1Use the initial value of the color property.

For many situations, color: initial will look like black text.

But the important idea is not “black”.

The real idea is:

1initial = the property’s default initial value

initial Is Not Always the Browser Default

This is one of the most important details.

The initial value is not always the same as the browser’s default style for that element.

Example:

1h1 {2  font-size: initial;3}

You might expect the heading to return to the browser’s normal large heading size.

But font-size: initial resets the property to the CSS initial value for font-size, not necessarily the browser’s default <h1> style.

Browser default styles are user agent stylesheet rules.

They are different from CSS initial values.

This distinction matters.

Example: display: initial

The display property is a good example.

HTML:

1<div class=”box”>Box</div>

CSS:

1.box {2  display: initial;3}

The initial value of display is inline.

So the <div> may behave like an inline element.

That can be surprising because a normal <div> is usually block-level.

The normal block behaviour of a <div> comes from browser default CSS.

It is not the same thing as the initial value of the display property.

So be careful with initial.

It means “property initial value”, not “normal element default”.

initial Example with Text Colour

HTML:

1<div class=”panel”>2  <p>This paragraph is reset.</p>3</div>

CSS:

1.panel {2  color: green;3}4 5.panel p {6  color: initial;7}

The paragraph does not inherit green from .panel.

It uses the initial value of color.

This can be useful when you want to stop inherited styling from affecting a child element.

initial Example with Margin

HTML:

1<p class=”note”>This is a note.</p>

CSS:

1.note {2  margin: initial;3}

This resets margin to its initial value.

The initial value of margin is 0.

So this removes margin from the note.

This can be useful, but a clearer version is often:

1.note {2  margin: 0;3}

Use the direct value when it is more readable.

When to Use initial

Use initial when you specifically want the CSS initial value of a property.

Example:

1.special-text {2  color: initial;3}

1.box {2  margin: initial;3}

1.item {2  text-align: initial;3}

However, initial can be confusing because it does not always match browser element defaults.

For many beginner projects, direct values are clearer:

1p {2  margin: 0;3}

instead of:

1p {2  margin: initial;3}

Use initial when the reset behaviour is intentional and you understand what the property’s initial value does.

The unset Value

The unset value is a conditional reset.

It behaves differently depending on the property.

For inherited properties, unset acts like inherit.

For non-inherited properties, unset acts like initial.

The rule is:

1If the property normally inherits:2  unset = inherit3 4If the property does not normally inherit:5  unset = initial

This makes unset useful when you want to remove a declared value and let the property behave naturally.

unset with an Inherited Property

The color property normally inherits.

Example:

1.card {2  color: navy;3}4 5.card p {6  color: unset;7}

HTML:

1<div class=”card”>2  <p>This paragraph is navy.</p>3</div>

Because color normally inherits, this behaves like:

1.card p {2  color: inherit;3}

The paragraph inherits navy from .card.

unset with a Non-Inherited Property

The margin property does not normally inherit.

Example:

1.card {2  margin: 40px;3}4 5.card p {6  margin: unset;7}

Because margin does not normally inherit, this behaves like:

1.card p {2  margin: initial;3}

The paragraph does not copy the parent’s margin.

Instead, its margin is reset to the initial value.

For margin, the initial value is 0.

So the paragraph margin becomes 0.

unset Example with Mixed Properties

HTML:

1<div class=”box”>2  <p>This paragraph uses unset.</p>3</div>

CSS:

1.box {2  color: green;3  padding: 2rem;4}5 6.box p {7  color: unset;8  padding: unset;9}

What happens?

For color:

1color normally inherits2unset acts like inherit3the paragraph becomes green

For padding:

1padding does not normally inherit2unset acts like initial3the paragraph padding becomes 0

The same keyword behaves differently depending on the property.

Why unset Is Useful

The unset value is useful when you want a property to stop using a custom value.

Example:

1.card p {2  color: red;3}4 5.card p.reset {6  color: unset;7}

HTML:

1<div class=”card”>2  <p>This paragraph is red.</p>3  <p class=”reset”>This paragraph goes back to inherited color.</p>4</div>

If .card has a colour, the reset paragraph can inherit it.

This is useful when you want to remove a more specific style and return to normal inheritance behaviour.

unset with the all Property

The all property applies a value to almost all CSS properties at once.

Example:

1.reset-box {2  all: unset;3}

This resets most properties on .reset-box.

For inherited properties, they inherit.

For non-inherited properties, they return to their initial values.

This can be useful for removing default button styles:

1button.reset {2  all: unset;3}

But be careful.

This also removes useful browser styles such as focus outlines unless you add them back.

A safer custom button reset might be:

1button.reset {2  all: unset;3  cursor: pointer;4}5 6button.reset:focus-visible {7  outline: 2px solid #2563eb;8  outline-offset: 2px;9}

If you reset interactive elements, always make sure keyboard users still have a visible focus style.

When to Use unset

Use unset when you want a property to behave as if your custom value were removed.

Good examples:

1.card p {2  color: unset;3}

1.custom-button {2  all: unset;3}

1.component {2  font-size: unset;3}

Remember the rule:

1Inherited property? unset means inherit.2Non-inherited property? unset means initial.

If that behaviour is what you want, unset is a good choice.

If you want a more explicit result, use inherit or initial instead.

The revert Value

The revert value rolls a property back to the value it would have had from a previous cascade origin.

For many everyday author styles, this often means returning toward the browser default style.

Example:

1h1 {2  font-size: revert;3}

This can make the heading use its browser default heading size again, assuming no other relevant styles are overriding it.

This is different from:

1h1 {2  font-size: initial;3}

initial uses the CSS initial value.

revert goes back through the cascade to a previous origin, such as browser default styles.

What Is a Cascade Origin?

CSS can come from different origins.

A simplified version is:

1browser default styles2user styles3author styles

Author styles are the styles written by the website developer.

For example:

1h1 {2  font-size: 2rem;3}

Browser default styles are built into the browser.

They are why headings are large, paragraphs have margins, and links are usually blue and underlined before you write any CSS.

The revert value can ignore the current origin’s changes and return to a previous origin’s value.

In normal website CSS, that often feels like:

1Go back to the browser default.

That is not the full technical definition, but it is a useful starting point.

revert vs initial

This difference is important.

Example:

1h1 {2  font-size: initial;3}

This uses the CSS initial value for font-size.

Now compare:

1h1 {2  font-size: revert;3}

This can return the heading to the browser’s default <h1> font size.

That means revert is often better when you want to undo your CSS and restore native element styling.

revert Example with a Heading

HTML:

1<h1 class=”page-title”>Page Title</h1>

CSS:

1.page-title {2  font-size: 1rem;3  font-weight: normal;4}5 6.page-title.default {7  font-size: revert;8  font-weight: revert;9}

If the heading has only .page-title, it uses the custom small normal style.

If it also has .default, the font size and font weight can return toward browser heading defaults.

HTML:

1<h1 class=”page-title default”>Page Title</h1>

This is useful when you want to undo custom author styling.

revert Example with Links

Suppose you remove link styling globally:

1a {2  color: inherit;3  text-decoration: none;4}

Then you want one section to use normal browser link styles again:

1.legal-text a {2  color: revert;3  text-decoration: revert;4}

HTML:

1<p class=”legal-text”>2  Read our <a href=”/terms”>terms</a>.3</p>

The link can return closer to its browser default appearance.

That may mean blue and underlined, depending on the browser and state.

This is often easier than manually recreating the default link styles.

revert with the all Property

You can use revert with all.

Example:

1.native-button {2  all: revert;3}

This can return an element closer to native browser styling.

Example:

1button.custom {2  all: unset;3  cursor: pointer;4}5 6button.native {7  all: revert;8}

The .custom button removes many styles.

The .native button returns toward normal browser button styling.

Be careful when using all.

It affects many properties at once.

When to Use revert

Use revert when you want to undo author styles and return an element closer to its browser default or previous cascade origin.

Good examples:

1.article h1 {2  font-size: revert;3}

1.content a {2  color: revert;3  text-decoration: revert;4}

1.native-control {2  all: revert;3}

revert is especially useful when working with resets, design systems, or third-party styles.

It can help you restore default behaviour without manually knowing every default value.

Comparing inherit, initial, unset, and revert

Here is the basic difference:

1inherit2Use the parent value.3 4initial5Use the property’s initial CSS value.6 7unset8Use inherit for inherited properties.9Use initial for non-inherited properties.10 11revert12Go back to the value from a previous cascade origin.13Often this means browser default styling in normal author CSS.

A short version:

1inherit = parent2initial = property default3unset = natural reset4revert = browser/default-origin reset

Comparison Example with color

The color property normally inherits.

HTML:

1<div class=”parent”>2  <p class=”example”>Example text</p>3</div>

CSS:

1.parent {2  color: green;3}4 5.example {6  color: red;7}

The paragraph is red because it has a direct value.

Now try inherit:

1.example {2  color: inherit;3}

The paragraph becomes green.

Now try initial:

1.example {2  color: initial;3}

The paragraph uses the initial value of color.

Now try unset:

1.example {2  color: unset;3}

Because color normally inherits, this behaves like inherit.

The paragraph becomes green.

Now try revert:

1.example {2  color: revert;3}

The paragraph goes back to the value it would have had without the current author declaration, based on the cascade.

In many simple cases, it may look like it is using inherited or browser default text colour, depending on the surrounding styles.

Comparison Example with margin

The margin property does not normally inherit.

HTML:

1<div class=”parent”>2  <p class=”example”>Example text</p>3</div>

CSS:

1.parent {2  margin: 40px;3}4 5.example {6  margin: 20px;7}

Now try inherit:

1.example {2  margin: inherit;3}

The paragraph copies the parent’s margin value.

This is forced inheritance.

Now try initial:

1.example {2  margin: initial;3}

The paragraph margin becomes the initial margin value, which is 0.

Now try unset:

1.example {2  margin: unset;3}

Because margin does not normally inherit, this behaves like initial.

The paragraph margin becomes 0.

Now try revert:

1.example {2  margin: revert;3}

The paragraph returns to the margin it would have had from a previous cascade origin.

For a <p>, that may restore browser default paragraph margin.

This is a major difference between initial and revert.

initial vs revert with Paragraph Margins

Browsers commonly give paragraphs default margins.

Example:

1<p>This paragraph has browser default margin.</p>

If you write:

1p {2  margin: initial;3}

The margin becomes the initial value of margin, which is 0.

If you write:

1p {2  margin: revert;3}

The paragraph can return to the browser’s default paragraph margin.

This is why revert can be useful when undoing a CSS reset.

Practical Example: Resetting a Link

Suppose a card has custom link styling.

HTML:

1<div class=”card”>2  <a href=”/guide”>Read the guide</a>3</div>

CSS:

1.card {2  color: navy;3}4 5.card a {6  color: inherit;7  text-decoration: none;8}

The link matches the card text and has no underline.

Now suppose one link should look like a normal link again.

HTML:

1<div class=”card”>2  <a class=”normal-link” href=”/guide”>Read the guide</a>3</div>

CSS:

1.card a.normal-link {2  color: revert;3  text-decoration: revert;4}

The link can return closer to browser default link styling.

This is a good use of revert.

Practical Example: Resetting a Component Child

HTML:

1<div class=”alert”>2  <p>This is alert text.</p>3  <p class=”plain”>This paragraph should be plain.</p>4</div>

CSS:

1.alert {2  color: darkred;3}4 5.alert p {6  font-weight: bold;7}8 9.alert .plain {10  font-weight: initial;11}

The alert text is dark red.

Both paragraphs inherit the dark red colour.

The first paragraph is bold.

The .plain paragraph resets font-weight to the initial value, which is normal.

This is a simple use of initial.

Practical Example: Making a Link Match Its Parent

HTML:

1<p class=”notice”>2  Read the <a href=”/docs”>documentation</a>.3</p>

CSS:

1.notice {2  color: purple;3}4 5.notice a {6  color: inherit;7}

The link becomes purple.

This is one of the most common uses of inherit.

It is clearer than manually writing:

1.notice a {2  color: purple;3}

If the notice colour changes later, the link follows automatically.

Practical Example: Removing a Custom Value with unset

HTML:

1<div class=”content”>2  <p class=”highlight”>Highlighted paragraph.</p>3  <p class=”highlight normal”>Normal paragraph.</p>4</div>

CSS:

1.content {2  color: #333333;3}4 5.highlight {6  color: orange;7}8 9.highlight.normal {10  color: unset;11}

The first paragraph is orange.

The second paragraph uses unset.

Because color normally inherits, unset acts like inherit.

So the second paragraph inherits #333333 from .content.

This is useful when you want to remove a custom colour and return to the surrounding text colour.

Practical Example: Removing Button Styles

HTML:

1<button class=”link-button”>2  Learn more3</button>

CSS:

1.link-button {2  all: unset;3  color: #2563eb;4  cursor: pointer;5  text-decoration: underline;6}7 8.link-button:focus-visible {9  outline: 2px solid #2563eb;10  outline-offset: 2px;11}

This turns a button into something that looks like a text link.

The all: unset declaration removes many default button styles.

Then the CSS adds back the styles needed for the design.

The focus style is added back for keyboard accessibility.

This pattern should be used carefully.

Do not remove default interactive styles unless you replace the important ones.

Practical Example: Restoring Native Button Styles

HTML:

1<button class=”custom-button”>Custom</button>2<button class=”native-button”>Native</button>

CSS:

1button {2  border: 0;3  background: #2563eb;4  color: white;5  padding: 0.75rem 1rem;6  border-radius: 6px;7}8 9.native-button {10  all: revert;11}

The first button uses your custom author styles.

The second button reverts toward native browser button styling.

This can be useful when a global rule is too broad and you need one element to return to normal behaviour.

Practical Example: Undoing a Reset

Many projects remove default spacing:

1h1,2h2,3p,4ul {5  margin: 0;6}

Later, you may want article content to use browser-like spacing again.

You could write custom spacing manually:

1.article p {2  margin-block: 1em;3}

Or you can use revert:

1.article p,2.article ul,3.article h1,4.article h2 {5  margin: revert;6}

This can restore default-like margins for article content.

That is useful when a global reset is helpful for UI components but too aggressive for long-form content.

The all Property

The all property is often used with these keywords.

It applies a keyword to almost every property at once.

Examples:

1.box {2  all: unset;3}

1.box {2  all: initial;3}

1.box {2  all: inherit;3}

1.box {2  all: revert;3}

This is powerful.

It can also be dangerous.

It can affect layout, typography, colours, interaction styles, and browser defaults.

Use it only when you really want a broad reset.

all: unset

The most common broad reset is:

1button {2  all: unset;3}

This removes many default button styles.

But it also removes useful behaviour-related styling.

For example, you may need to add back:

1button {2  cursor: pointer;3}4 5button:focus-visible {6  outline: 2px solid #2563eb;7  outline-offset: 2px;8}

The button still behaves like a button in HTML.

But visually, many CSS defaults are removed.

Use all: unset carefully on interactive elements.

all: initial

This sets almost all properties to their initial values.

Example:

1.widget {2  all: initial;3}

This can make the element ignore many inherited styles.

However, it can produce surprising results.

For example, display can become inline.

Fonts, colours, layout, and spacing may reset in ways you did not expect.

Use all: initial with caution.

It is usually too broad for everyday beginner CSS.

all: inherit

This makes many properties inherit from the parent.

Example:

1.child {2  all: inherit;3}

This is rarely what you want.

It can force layout and box properties to inherit even though they normally would not.

For example, the child may inherit width, padding, border, or other values in ways that make layout confusing.

Use direct properties instead:

1.child {2  color: inherit;3  font: inherit;4}

That is usually clearer.

all: revert

This rolls many properties back toward values from previous cascade origins.

Example:

1.default-content {2  all: revert;3}

This can be useful when you want a section to escape a global reset or framework styling.

However, it can affect many properties at once.

It is usually better to use targeted revert declarations when possible:

1.article h1,2.article p,3.article ul {4  margin: revert;5}

This is more predictable than reverting everything.

Choosing the Right Keyword

Use this simple decision guide:

1Do you want the parent value?2Use inherit.3 4Do you want the CSS property’s initial value?5Use initial.6 7Do you want the natural default behaviour for that property?8Use unset.9 10Do you want to undo your CSS and return toward browser/default-origin styling?11Use revert.

Examples:

1a {2  color: inherit;3}

Use this when a link should match surrounding text.

1p {2  margin: initial;3}

Use this when you specifically want the initial margin value.

1.warning {2  color: unset;3}

Use this when you want to remove a custom colour and let normal inheritance happen.

1.article p {2  margin: revert;3}

Use this when you want paragraph margins to return toward browser defaults.

Common Mistake: Thinking initial Means Browser Default

This is a very common mistake.

This:

1h1 {2  font-size: initial;3}

does not mean:

1Use the normal browser h1 size.

It means:

1Use the initial value of font-size.

If you want browser default heading behaviour, revert is usually closer:

1h1 {2  font-size: revert;3}

Remember:

1initial = property initial value2revert = previous cascade origin, often browser default

Common Mistake: Using unset Without Knowing the Property

This can be confusing:

1.box {2  color: unset;3  padding: unset;4}

These do not behave the same way.

color normally inherits, so:

1color: unset;

acts like:

1color: inherit;

padding does not normally inherit, so:

1padding: unset;

acts like:

1padding: initial;

That means the padding becomes 0.

Always ask:

1Does this property inherit by default?

That tells you what unset will do.

Common Mistake: Removing Focus Styles

This can create an accessibility problem:

1button {2  all: unset;3}

The button may lose its visible focus indicator.

Keyboard users need a visible focus style to know where they are on the page.

A better version is:

1button {2  all: unset;3  cursor: pointer;4}5 6button:focus-visible {7  outline: 2px solid #2563eb;8  outline-offset: 2px;9}

If you reset interactive elements, add back clear focus styles.

Common Mistake: Overusing all

The all property is powerful, but it is often too broad.

This may cause unexpected results:

1.component {2  all: unset;3}

The component might lose display behaviour, inherited fonts, layout settings, or other useful styles.

A more targeted reset is often safer:

1.component {2  margin: 0;3  padding: 0;4  color: inherit;5}

Use all when you need a broad reset.

Use individual properties when you need control.

Common Mistake: Forcing Inheritance on Layout

This is usually not a good idea:

1* {2  margin: inherit;3  padding: inherit;4}

Margins and padding do not normally inherit because that would make layout difficult.

Most of the time, layout styles should be applied directly to the elements that need them.

Better:

1.card {2  padding: 1rem;3}4 5.card > * + * {6  margin-top: 1rem;7}

This gives the parent padding and controls spacing between children.

It does not force every child to inherit padding or margin.

Debugging These Values

When a reset keyword gives an unexpected result, ask these questions:

1Which property is being reset?2Does the property inherit by default?3Is the value coming from a parent?4Is the value coming from a browser default?5Is a direct rule overriding inheritance?6Is a CSS reset or framework involved?7Is all being used?8Would a direct value be clearer?

Browser developer tools can help.

Inspect the element and check which declarations are active.

Look for inherited styles, crossed-out styles, and browser default styles.

This makes it easier to see whether inherit, initial, unset, or revert is doing what you expected.

Quick Reference Table

1Value      Meaning2inherit    Use the parent value.3initial    Use the property’s initial CSS value.4unset      Inherit if the property normally inherits; otherwise use initial.5revert     Return to the value from a previous cascade origin, often browser default.

Quick Reference by Use Case

1Make a link match surrounding text:2color: inherit;3 4Make a button use the page font:5font: inherit;6 7Remove a custom inherited value:8color: unset;9 10Remove spacing:11margin: initial;12or13margin: 0;14 15Restore browser-like paragraph spacing:16margin: revert;17 18Remove most button styling:19all: unset;20 21Restore native styling:22all: revert;

Full Example: Link Styling

HTML:

1<div class=”card”>2  <p>3    Read the <a href=”/guide”>full guide</a>.4  </p>5</div>

CSS:

1.card {2  color: #1e40af;3  font-family: Arial, sans-serif;4}5 6.card a {7  color: inherit;8  font-weight: bold;9}

The card sets the text colour and font.

The link inherits the card colour.

The link also gets direct bold styling.

This keeps the link visually connected to the card.

Full Example: Resetting One Paragraph

HTML:

1<section class=”notice”>2  <p>This paragraph is bold.</p>3  <p class=”normal”>This paragraph is normal weight.</p>4</section>

CSS:

1.notice {2  color: darkgreen;3}4 5.notice p {6  font-weight: bold;7}8 9.notice p.normal {10  font-weight: initial;11}

The notice colour is inherited by both paragraphs.

Both paragraphs are bold because of the .notice p rule.

The .normal paragraph resets font-weight to its initial value.

The result is:

1first paragraph: dark green and bold2second paragraph: dark green and normal weight

Full Example: unset on Inherited and Non-Inherited Properties

HTML:

1<div class=”panel”>2  <p class=”reset”>This paragraph uses unset.</p>3</div>

CSS:

1.panel {2  color: purple;3  padding: 2rem;4}5 6.panel .reset {7  color: unset;8  padding: unset;9}

The paragraph colour becomes purple.

Why?

Because color normally inherits, so color: unset acts like color: inherit.

The paragraph padding becomes 0.

Why?

Because padding does not normally inherit, so padding: unset acts like padding: initial.

This example shows why unset depends on the property.

Full Example: Restoring Article Defaults

HTML:

1<article class=”article”>2  <h1>Article Title</h1>3  <p>This article should use readable default spacing.</p>4  <p>This is another paragraph.</p>5</article>

CSS:

1h1,2p {3  margin: 0;4}5 6.article h1,7.article p {8  margin: revert;9}

The first rule removes heading and paragraph margins globally.

The second rule restores margins inside .article.

This is useful when a reset is helpful for UI components but not for article content.

Full Example: Custom Button Reset

HTML:

1<button class=”text-button”>2  Learn more3</button>

CSS:

1.text-button {2  all: unset;3  color: #2563eb;4  cursor: pointer;5  font: inherit;6  text-decoration: underline;7}8 9.text-button:focus-visible {10  outline: 2px solid #2563eb;11  outline-offset: 2px;12}

The button keeps its semantic HTML behaviour.

The default button appearance is removed.

Custom link-like styling is added.

A visible focus style is added for keyboard users.

This is a responsible use of a reset.

Full Example: Native Button Revert

HTML:

1<button class=”primary-button”>Primary</button>2<button class=”default-button”>Default</button>

CSS:

1button {2  border: 0;3  border-radius: 8px;4  background-color: #2563eb;5  color: white;6  padding: 0.75rem 1rem;7}8 9.default-button {10  all: revert;11}

The primary button uses the custom button styles.

The default button reverts toward native browser button styling.

This is useful when a broad rule affects too many elements.

Best Practices

Use inherit for links, icons, and form controls that should match surrounding text.

Use initial when you specifically want the CSS initial value.

Use unset when you want to remove a custom value and let the property behave naturally.

Use revert when you want to undo author styles and return toward browser defaults.

Be careful with all.

Avoid removing focus styles from interactive elements.

Use direct values when they are clearer than reset keywords.

Remember that initial is not the same as browser default.

Remember that unset depends on whether the property normally inherits.

Use browser developer tools to check where final values come from.

Quick Summary

inherit, initial, unset, and revert are CSS-wide keywords.

They help control how CSS values are inherited, reset, or restored.

inherit makes a property use the parent value.

initial makes a property use its CSS initial value.

unset acts like inherit for inherited properties and initial for non-inherited properties.

revert rolls a property back to a value from a previous cascade origin, often browser default styling in normal author CSS.

These values are especially useful when working with inherited text styles, links, form controls, CSS resets, design systems, and third-party styles.

Use them deliberately.

They can make CSS cleaner when you understand them.

They can make CSS confusing when used broadly or accidentally.