Inherit and Initial value in CSS

Inherit
Initial

Inherit

In CSS, an element can inherit its value from its parent element

index.html

<div class="grandparent">
  <div class="parent">
    <p class="child">This is some text in the child element.</p>
  </div>
</div>

style.css

.grandparent {
  color: blue;
  font-size: 20px;
}

.child {
  color: inherit;
  font-size: inherit;
}

In this example, the child element will inherit the color and font-size from its parent element. The child element will be blue and have a font-size of 20px.

Initial

The initial value of a CSS property is the value that is set by default.

For example, the initial value of the color property is black.

index.html

<p class="text">This is some text.</p>

style.css

.text {
  background-color: yellow;
}

.text {
  background-color: initial; 
  display: initial;
}

Now can you guess what the background color of the text will be?

The background color of the text will be yellow because the initial value of the background-color property is transparent.

The same goes for the display property. The initial value of the display property is inline.

** Initial value of font-size is medium.

** Initial value of font-weight is normal.

** Initial value of font-family is depends on the browser.

....

I hope you find this article useful.

Table of Contents

Inherit

Initial