Inheritance | Notion

In CSS, inheritance controls what happens when no value is specified for a property on an element.

CSS properties can be categorized in two types:

For example:

<!-- a <p> with a word wrapped with <strong> -->
<body>
  <p>Lorem ipsum <strong>dolor</strong> sit amet.</p>
</body>

If we style the color of <p>, the color of <strong> will inherit from it,

But the border will not be inherited since it is a non-inherited property:

p {
  /* color will be inherited to <strong> */
  color: dodgerblue;
  /* border will NOT be inherited to <strong> */
  border: 1px solid black;
}

However, if you are unhappy about it :persevere:, you can also manually set inherited properities.

strong {
  /* set the color back to initial (black) */
  color: initial;
  /* Force it to inherit the border properity */
  border: inherit;
}