Inheritance is a way in CSS in which styles get applied to a parent element and are then passed on to its child elements. Not all properties are inheritable, but those that are will take on the value of their parent by default.
It takes the following steps:
1. Identify your parent HTML element: This can be any HTML element such as body, div, section, or article that contains child elements inside of it.
```
This is an example of CSS inheritance
This is another example of CSS inheritance
```css
#parent {
color: blue;
font-size: 20px;
}
```
In this case, all child elements inside the div with the id of “parent” will inherit the color and font size. In other words, the text inside those child elements will be in blue color and of 20px size.
1. Overriding Inherited Styles: If you want a specific child element not to inherit any style from the parent, you can do so by specifying separate style for that child.
```
.child {
color: red;
font-size: 15px;
}
```
Now, the child elements with the class “child” will not inherit color and font-size from the parent. Instead, they will have their own color (red) and font-size (15px).
Note: Not all CSS properties are inheritable, for example: padding, border, margin, etc. are not inherited from parent and they need to be specified directly for a child if you want to have them.
