Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

CSS Basics

Well done!

You have completed CSS Basics!

Sign up for Treehouse Back to Library

Inheritance

2:39 with Anwar Montasir

You might have seen the term inheritance used regarding certain CSS properties. Inherited properties in CSS means that an HTML element’s style values are copied from its parent (or containing) element.

Further reading

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    You might have seen the term inheritance used regarding certain 0:00
    CSS properties. Inherited properties in CSS means that an HTML element's 0:05
    style values are copied from its parent or containing element. 0:11
    A good example of inheritance in a CSS property is with the color property. 0:18
    If a color value is applied to an element, 0:24
    any child of that element will inherit that color value. 0:27
    The one exception is the text color in links since 0:32
    browsers assign specific color styles for those. 0:36
    For example, in our CSS, 0:41
    we have our paragraph set to a text color of olive. 0:44
    In our HTML, where I have 0:49
    the name of Developer Diane's field of study at Treehouse, 0:51
    let's make an edit to emphasize the phrase "web development". 0:56
    Note that we don't specify the color of the em element anywhere in the CSS. 1:11
    How did the browser know to use olive to color the words "web development"? 1:17
    That's because text color is an inherited property. 1:25
    The element inherits the text color from the parent element, 1:30
    the paragraph. Not all CSS properties are inherited, however. 1:35
    Non-inherited properties are properties that 1:41
    default to the initial value regardless of the styles assigned to the parent. 1:44
    For instance, let's look at the section with an ID of education. 1:51
    We used a CSS rule to set a 3px red border around the section. 1:57
    However, the h2 and ul elements found inside the education 2:04
    section don't each have their own individual border, do they? 2:08
    That's because border is a non-inherited property. So the 2:14
    h2 and ul default to their initial value of having no border at all. 2:18
    I've included an article from Sitepoint on CSS inheritance that 2:26
    includes a list of inherited CSS properties. 2:30
    Anything not on this list will default to the initial value. 2:34

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up