Learn about CSS inheritance and review the inherit, initial, unset, and revert props, which enable you to pass inheritable properties in CSS.

Inheritance occurs in real life. Children inherit their parents’ features: tall parents are likely to have tall children and vice versa. Children also inherit their parents’ wealth and properties.

Inheritance in software development works the same way. In OOP languages, classes inherit their parent class’ properties and methods. This is done to stave off repeating code.

What about in CSS, the design language of the web? Inheritance happens there too. If you set a property in a parent element, the children by default inherit the properties and their values without explicitly defining the property. A property such as color is passed down to an element’s children. If an element is green, all its children turn green.

In this tutorial, we’ll focus on inheritance in CSS. We’ll demonstrate how inheritance works in CSS and review some CSS properties you can use to pass down inheritable properties to child elements.

Here’s what we’ll cover:

• What is CSS inheritance?
• Which CSS properties are inherited?
• What is CSS inherit?
• initial
• unset
• revert

#css #programming #developer