Inheritance

When you apply CSS to an element, certain properties are automatically passed down to its child elements. This process is called inheritance. Inheritance helps you keep your stylesheets cleaner and more efficient, because you do not need to repeat common styles for every element.

Not all CSS properties are inherited. Inheritable properties include those related to text and font, such as color, font-family, and font-size. These properties will be passed from a parent element to its children unless specifically overridden. For instance, if you set color on a parent <div>, all text inside that <div> will display in that color unless a child element has its own color rule.

Non-inheritable properties are usually those that affect the layout or the box model, such as border, margin, padding, and background-color. These properties apply only to the element you select, not to its children. In the example above, the border and background-color set on .parent do not affect the <p> or <span> elements inside it.

Understanding which properties inherit by default allows you to write CSS more efficiently and predict how your styles will cascade throughout your HTML structure.