CSS Inheritance, inherit, initial and unset values

css inheritance

CSS Inheritance is one of the basic features of CSS. With this basic feature, the style applied to an element is also passed to its sub-elements. The main purpose of inheritance is undoubtedly to save developers from repetition of code. As a matter of fact, it would be very difficult to code font family, color, font size separately for each element.

However, due to the increased page size, the page load time will increase, which will cause the search engines to negatively evaluate it. In this respect, inheritance is very important.

Inherit, initial and unset values

Let’s examine the inherit, initial and unset values before going through the examples with inheritance.

Inherit: Inherit is used to indicate that a property should be retrieved from a parent element

Initial: Initial is used to return a property passing through an element to its initial value.

Unset: The selected item inherits the inherited values passed from the parent. If no rollover value is available, the initial value from the CSS specification is used for each property.

CSS Inheritance Examples

In the following example, we’ve assigned color, padding, and text-align properties to the div.parent element. As seen in the preview, the div.child object does not inherit the padding property when inheriting the text-align and color properties.

See the Pen by Ayhan Selek (@ayhanselek) on CodePen.

We can provide the padding property of the div.child object with the inherit value to get it from the parent element. If we rearrange our codes as follows;

See the Pen inherit value by Ayhan Selek (@ayhanselek) on CodePen.


Let’s now let a value assigned to the bottom element override the values inherited. For this, let’s assign a color assignment to the color property of the div.child element.

See the Pen  overriding by Ayhan Selek (@ayhanselek) on CodePen.

Finally, we use the initial value to return inherited properties to child elements to their initial value. The final version of the CSS code looks like this:

See the Pen – initial value by Ayhan Selek (@ayhanselek) on CodePen.

Summary

  • Initial value used to rotate an inherited wherein the starting value.
  • The values assigned to the sub-elements will match the values passed through the inheritance.