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:
CodePen Example Start: https://codepen.io/craigabourne/pen/j...
CodePen Example END: https://codepen.io/craigabourne/pen/g...
► Links used in the video:
MDN Inheritance: https://developer.mozilla.org/en-US/d...
MDN Cascade & Inheritance:
https://developer.mozilla.org/en-US/d...
MDN Specificity - https://developer.mozilla.org/en-US/d...
The Specificity calculator: https://specificity.keegan.st/
► This video is part of the CSS for Absolute Beginners playlist: • CSS for Absolute Beginners
► Social Media:
/ craigabourne
/ craigabourne
► Code & Projects:
https://github.com/craigabourne
https://codepen.io/craigabourne
Смотрите видео Understanding Inheritance in CSS онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Craig A. Bourne 21 Июль 2021, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 1,857 раз и оно понравилось 119 людям.