Inheritance in CSS

In this article, we will explore CSS Inheritance. CSS Inheritance can sometimes be a perplexing concept when learning CSS. However, in this article, we will examine an example of CSS Inheritance and break it down step by step.

Understanding Inheritance In CSS 💥

Inheritance in CSS is like passing down traits from parents to their children. When you have an element inside another element, some styles applied to the parent element can automatically apply to the child element, unless you change them specifically for the child.

Imagine a parent has blue eyes. Inheritance in CSS is like the child automatically having blue eyes, too, unless you give the child a different eye color.

In CSS, specific properties like text color, font size and the font-family is inherited by default. This means that if you set these properties for a parent element, the child elements inside it will inherit those styles unless you override them. On the other hand properties like width, height, background color,border etc. are not inherited.

Example with live code: ⚡️

In the above example, we have a parent <div> element with the class "parent". It has a color property set to blue and a font-size property set to 18 pixels. The background-color property is set to yellow.

Inside the parent element, there is a child <div> element with the class "child". It inherits the color and font-size properties from its parent. It also has its background-color property set to green, which is not inherited.

Within the child element, there is a grandchild <div> element with the class "grandchild". It inherits the color and font-size properties from both its parent (child) and grandparent (parent). It also inherits the background-color property from its parent (child).

As a result, the grandchild element will have blue text color, a font size of 18 pixels, and a green background color.

Confused about how background color is inheritable in the above example? 🤔

Don't worry Let's take an example to understand this :

In this case, since no specific background-color is set on the child element, it will inherit the transparent background from the parent. As a result, the child element will appear to have a blue background because it inherits the blue background color from its parent.

So, to clarify, the background color is not inheritable in the sense that you cannot directly apply the background color of the parent element to its child elements. However, if no background color is specified on the child, it will inherit the transparent background from its parent, making the parent's background color visible.

Properties of Inheritance In CSS 🚀

1. inherit: Specifies that a property should inherit its value from the parent element. It establishes a direct inheritance relationship between the parent and child elements.

    .child {
      color: inherit; /* Inherits the color property value from the parent */
    }
   

2. initial: Sets a property to its default value as specified by the CSS specification. It effectively resets any previous styling or inheritance and applies the initial value. The default color of the browser is black.

    .element {
      font-size: initial; /* Resets the font-size property to its default value */
    }
   

3. unset: Resets a property to either its inherited value if it is inheritable or its initial value if it is not inheritable.

    .element {
      padding: unset; /* Resets the padding property to its inherited or initial value */
    }
   

4. revert: The revert keyword resets a property to its inherited value, undoing any changes made by the user agent or user stylesheets. It restores the property to its default value or the value specified in the user agent's stylesheet.

    .element {
      color: revert; /* Resets the color property to its inherited value or default value */
    }
   

Note: The revert the keyword is relatively new and may not be fully supported in all browsers.

Refer to the below code for more understanding 💯

Conclusion 💥

In conclusion, CSS inheritance is a fundamental concept in web development that allows properties to be passed from parent elements to child elements. By understanding how inheritance works and using keywords like inherit, initial, unset, and revert, we can control the flow of styles and create consistent designs.

Thanks for reading all the way to the end! 💖

If you have any questions, please use the comments section 💬

Let's connect! Find me on the web 🔗

If you have any Queries or Suggestions, feel free to reach out to me.

Happy Coding :)❤️