Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features
Autoplay

    Apply CSS Styles with Inheritance

    Tyler ClarkTyler Clark
    cssCSS

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss