If you have ever written CSS before then chances are you have had to write CSS like this.

.btn {
  background: none;
  border: none;
  font-size: 1rem;
  font-family: Roboto;
}

This is because browsers give us default CSS values that we often manually remove or use a CSS reset to remove. It is often frustrating running into these default styles as they can be a pain to workaround, so in this article I will show you all the different ways you can inherit/reset CSS styles to get the exact look you want.

What Does initial Do?

The easiest CSS value to understand is initial. This value just resets the CSS property to its initial value. You may be confused when using this, though, because the initial CSS value for properties is not always what you think it is since it often differs from the browser’s default styles.

Take for example a simple div. Everyone knows that a div is a display block element, but that display block value actually comes from the default styles of the browser. The initial value for the display property in CSS is actually inline. This means if you set a div’s display property to initial then it will become an inline element.

In order to understand a bit more how this works we need to talk about the three layers of CSS, default/initial styles, browser styles, and custom styles.

The default or initial styles are just the default values of every CSS property defined in the CSS specifications. These can easily be found by checking the documentation for any CSS property on MDN.

Browser styles are the specific styles that each browser assigns to elements such as buttons, block quotes, headings, etc. This is why a button in Safari looks much different than a button in Chrome. They have two separate browser stylesheets.

Finally, we have custom styles which are any styles that you write or include on the page. This can be anything from inline CSS to a CSS stylesheet you link in the head of the HTML.

These three styles are then combined using specificity and cascade rules where the default/initial styles are the least specific, followed by browser styles, followed by custom styles. This means that browser styles will override the default/initial styles and your custom styles will override all browser styles.

Tying all this back to initial, we can see that the value of initial is great to use if you really want to remove all browser specific styles.

What Does inherit Do?

In CSS many properties inherit values from their parent. For example, font-family, color, and many other properties inherit their values by default. This is why you can set the color of a div to green and have all that div’s children also have green text. By setting a CSS property’s value to inherit you are saying that you want the value of the CSS property to be equal to the value of it’s parent’s property. If the parent is inheriting that property then it will continue to go up the chain until it finally finds a specific value set on one of the parent’s.

For example, if I give a div a 1px solid black border and put a child inside that div then we know the border will only show up on the parent div and not the child. If I set the border property to inherit on the child, though, then that child will also have a 1px solid black border.

This is a very useful value to have since some elements, like buttons, have a specific font-family set in the browser style sheet, but you most likely want to inherit that font-family to match the rest of your site. This is why I almost always set my buttons to inherit their font-family.

It is important to remember that the inherit property value makes the element inherit its value from its parent element. It does not inherit its value from the cascade.

div {
  color: red;
}

.blue {
  color: blue;
}

p.important {
  color: inherit;
}

<div>
  <p class="important blue">This is red</p>
</div>

In the above example the p tag would have red text since it is inheriting its color from the parent div. It does not move down the cascade to the next most specific selector on that element.

What Does unset Do?

unset is an interesting property since it will either do the same thing as initial or inherit. If a CSS property naturally inherits, such as color, font-family, etc. then it will act the same as inherit. If a CSS property does not naturally inherit, such as display, border, etc. then it wil act the same as initial. At first this may not seem very useful since you can just manually put inherit/initial as the value, but this value shines when using the all property.

The all property allows you to set one value for every single property of an element. This is really useful if you want to remove all browser specific styles from an element such as a button.

.btn-all {
  all: unset;
}

.btn-no-all {
  background: initial;
  border: initial;
  font-size: inherit;
  font-family: inherit;
}

By using all we can reset everything about an element to the initial values or make sure they inherit which is ideal when creating styles for HTML elements from scratch. This is pretty much the only use case for unset, though.

What Does revert Do?

revert is the finally piece of the puzzle when it comes to resetting CSS styles since revert allows you to reset a CSS value back to the browser specific style. If an element has been heavily modified and you want to change part/all of it back to the browser default you can set the property value to revert to do that.

This is not something I use too often as I prefer to just remove all browser styles, but this could be useful to change back some styles to their browser specific style after doing a all: unset.

Conclusion

There are many ways to reset a CSS property which is incredibly useful for making sure that no annoying browser styles interfere with your custom styles.