Values and Units in CSS : inherit, initial, unset,

Tiny CSS keywords can reset, copy, or undo styles with just one word.

• Keywords control styles without numbers

• inherit copies, initial resets, unset smart reset

• all applies to most properties, safer to limit

• revert returns to browser/user defaults

RECOMMENDED ARTICLES

Units in CSS affect a number of properties. These include padding, margin etc

Keywords

Sometimes, you don’t want to use a number—you just want to give a simple instruction using a word, like none, which tells the browser not to show something. For example, if you don’t want underlines on your navigation links, you could write:

On the other hand, if you do want underlines, you’d write:

Global Keywords: inherit, initial, unset

CSS has three special words that work with every property. Think of them as “magic commands” that you can use to control how styles behave:

inherit, initial, unset

Let’s break them down—starting with inherit.

inherit — Like a Hand-Me-Down

Imagine a parent wearing a blue shirt and white pants. If the child is told to wear what the parent is wearing, that’s what inherit does—it copies the style from the parent. 

Normally, some styles like text color are automatically passed down (inherited), while others like borders are not. But using inherit, you can force any style to be passed down, even if it’s not by default.

Example

Let’s say you have a navigation bar styled like this:

And your HTML looks like this:

Here, the text inside the div should appear yellow, but the button elements might use the browser’s default colors (probably black text). That’s because buttons don’t automatically inherit text color. 

To fix that, tell the buttons to copy the text color from their parent:

Now the buttons will display yellow text, just like their parent .menu.

Forcing Inheritance Where It Doesn’t Happen

Now let’s say you want a child element to copy a style that normally isn’t passed down like a border. 

Borders don’t get inherited, but you can force it:

Now the <span> inside the .alert will get the same red border. 

Or maybe you just want to reuse part of the border style, like the color:

This way, the <span> gets the same red color, but you can give it a different border width or style.

initial — Like Hitting the “Reset” Button

 Think of initial like the “reset to factory settings” button. If you’ve ever reset a phone or a video game to its default settings, that’s exactly what initial does to a CSS style. 

It tells the browser: 

“Forget any styles I added here—just go back to how this property starts by default.” 

Example : 

Let’s say you made your paragraph text extra bold:

Then later, you want a specific paragraph to go back to how it normally looks. You don’t need to remember what that default is—you can just reset it:

where .reset is a class that points to specific p elements. This makes the font weight normal again (which is the browser’s default for that property).

unset — The “Smart Reset”

Think of unset like a smart assistant that chooses between two actions: 

If something is usually inherited (like text color), unset says: 

“Okay, I’ll just copy from the parent.” 

If it’s not usually inherited (like padding or borders), unset says:  

“I’ll just go back to the default setting.” 

So, unset is like a universal fixer. It automatically decides whether to use inherit or initial, depending on the situation.  

Example:

Let’s say your site has a section styled like this:

Now you have a special box inside the card that you want to undo all styling for (but still keep inherited things like color when it makes sense):

And your HTML:

This .clean box removes all applied styles except what naturally inherits, like color. It clears margins, borders, padding, fonts—everything—unless the property is normally inherited.

What is ‘all’ ?

all is a special keyword that applies your command (like unset or inherit) to almost every CSS property at once—except two special ones (direction and unicode-bidi).

Using:

…means:

“Copy every style from the parent element, not just a few.” 

But that might be too much. Often, you only want to inherit a few styles like color and background, not layout or positioning. 

So a better and safer version would be:

This gives you more control and avoids weird side effects. 

Bonus: revert (Upcoming Feature)

There was a new keyword being tested: revert. 

It means:

“Ignore author styles (like yours) and go back to the browser’s or user’s defaults.”

Kind of like saying:

“Pretend the stylesheet never touched this element.”