Understanding the “Initial”, “Inherit” and “Unset” CSS Keywords

The Basic Styles of the Web

The Initial Value of Every Property in CSS

Line-height’s inital value is “nornal”

The User-Agent Browser Styles

h1 element styles from the chrome browser user agent

The Inherit Keyword

CSS Initial Keyword

  • The color property’s initial value will always be black
div.box{ 
background-color: red;
display: initial; /* will be equal to inline and not to block */
}
display initial value — info in MDN

The Unset Keyword

  • Inherited properties — properties that affect their children. All the properties which affect text have this natural behavior. For example, if we define a font-size on the HTML element, it will apply to all HTML elements until you set another font-size on an inner HTML element style.
font-size inherit property — taken from MDN
  • Non-inherited properties — All the other natural properties, which affect only the element which they define. These are all of the properties that don’t apply to text. For example, if you put a border on a parent element, its child will not get a border.
border un-inherit property — taken from MDN
.some-class{ 
color: unset; /* will be equal to 'inherit' value */
display: unset; /* will be equal to 'initial' value*/
}

Why Use Unset if it Works Exactly the Same as Inherit and Initial?

/* Bad */
.common-content *{
font-size: inherit;
font-weight: inherit;
border-width: initial;
background-color: initial;
}
/* Good */
.common-content *{
all: unset;
}

The Revert Keyword

HTML div tag’s user agent’s base style
div{
display: revert; /* = block */
}
h1{
font-weight: revert; /* = bold */
font-size: revert; /* = 2em */
}
/* Good */
.common-content *{
all: revert;
}

Browser Support

  • inherit — works in all browsers, including Internet Explorer 11
  • initial & unset & revert— work in all browsers except for Internet Explorer 11

Final Words

Video Talk on This Subject:

My talk: “The CSS Keywords That No One Really Understands

--

--

--

CSS & HTML Expert

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Thinking at varying scales of abstraction makes you a Better Programmer.

Delving Into Unit Tests

Front-End Web UI Frameworks and Tools: Bootstrap 4

Why computer floating points are inaccurate

Some Python Terminologies Developers Should Know

Installing basic rails app with passenger and apache

LMS Integration: Phase 1 Report (GSoC 2021- Ayan Biswas)

Building a RESTful API with Go (Part 1)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Elad Shechter

Elad Shechter

CSS & HTML Expert

More from Medium

SASS → (SAssy CSS)

Building a Mobile App using HTML, CSS, and JavaScript

Colors in #CSS

CBEM with Selectors — Enhanced BEM CSS Methodology