Understanding Inheritance in CSS

► Inheritance is the behavior through which some elements can inherit styles that are applied to ancestor elements, rather than directly to themselves.

So if a font is applied to a div element, for example, then that same font is applied to all text inside the div. Including the text enclosed within child elements of that div.

If we were unable to do this in CSS, and property values could not be inherited by descendant elements, then we’d have to laboriously select each of the child elements directly and apply the font to those too.

We should be aware that not all properties will be passed down to be inherited. A perfect example is styles associated with the CSS box model. So borders, margins, and paddings are not inherited by descendants of elements they are applied to.

Another thing we should note is that values that have been inherited have an absence of specificity. Not even a specificity of zero. So are easily overridden.

► Timestamps:
0:00 Start
0:28 Codepen project
0:40 Inheritance example
2:10 Defining Inheritance
2:46 Trees diagram to visualise inheritance
3:35 Styles propagate down the document but not up
4:07 Not all CSS style properties can be inherited
4:40 using advanced selectors to pass non-inherited properties
6:09 Inherited values have an absence of specificity
6:20 Specificity calculator
7:10 The potential problem with using universal selector
8:10 Not elements will accept inherited styles
9:42 Overriding default browser styles
10:16 Styling the form input’s placeholder text
10:27 Summary
12:07 In the next video…

► Get the code:

► Links used in the video:
MDN Cascade & Inheritance:

► Social Media:

► Code & Projects:

[caoimheshields]

This is an amazing video. Finally, someone explains of all of those weird style errors!

[simonbielik]

Some of the best CSS videos around. Way more care for detail than channels that have thousands of subs like Kevin Powell. I bought Brad Traversy HTML/CSS course on Udemy and it is destroyed by the free videos on your channel. I hope more people find you. You are a great teacher

[bz]

I like your videos. Really covers some in- depth mechanics and the exceptions are well explained too such as inheritance not working for box model attributes etc.

The exceptions explained are really helpful and makes them better compared to the typical youtube videos

[leelaneupane]

I love your tutorials and how you explain every concept! I am looking forward to learn more from you! Thank you so much!

[maddiecurry]

Subscribed within one video. I bought a Udemy course and they just skimmed over.

[petradanquah]

Thank you for the amazing content again

[malteeusebio]

thanks this is a very clean explanation