CSS Fundamentals
Apply CSS Styles with Inheritance
The cascade is frequently conflated with the concept of inheritance. These two topics are related, however you should try to understand each individually. Let's apply color styles to a UL and see how it affects our child LIs. As well as use the inherit and initial property values.
Instructor: [00:00] Here, we have the basic HTML to make a navigation. Inside of our style.css, if we did ul color as blue and refresh, we see that we get this color style applied to all of our li's inside the ul. This is called inheritance, meaning that some styles are carried to the child elements within the HTML tree.
[00:20] Most of the accepted inherited properties involve text, such as color, font, font family, font size, and so on, while properties that do not are those like padding, margin, height, and width.
[00:33] We can also control inheritance. For example, if we did li with a color of red. Then, inside of home, we gave this home li a class of home. Back inside of our style, if we targeted this home class of color inherit and refresh the page, we see that all the li's are now red except for the home item.
[00:54] The li's are red because we're targeting them here. However, we tell the home li to apply the inherited color, which in our case is the color being passed to it from its parent ul element. We can also use the initial property value, which, when we refresh the page, changes the text back to black.
[01:14] Initial sets the property value to be the same as the value set for that element in the browser's default style sheet. For our text, this is black. Initial is not supported in IE, but is in all of the other browsers.