From the course: CSS Positioning Best Practices

Understanding levels of inheritance - CSS Tutorial

From the course: CSS Positioning Best Practices

Understanding levels of inheritance

The word Cascading in the name Cascading Style Sheets refers to inheritance. This is how one element inherits its properties naturally and organically from the elements that surround it. In other words, here in this Cascading Style Sheet, we see that we have the background color is this yellow color, the text color is this brown color, and so all the text in the document is brown, and all the background in the document is yellow, because the heading, choose these elements here, and the paragraphs, these elements here, they inherit their properties from the body and then they override whatever it is that's specified in their styles. And so the body has this Helvetica font. But both the heading and the paragraphs, they overrides this with their own fonts. For example, if I wanted to change the background color for just the headings, I would insert a background color property here and that will now override the background color from the body. Without that, it was inheriting the background color from the body. So if I save this and reload it in the browser, we'll see that the headings now get their own background color, which is distinct from the body, because that's being overridden now, just like the font is being overridden. Without this, it inherits that property from the background. Go ahead and save and reload, and now it's yellow again. You can do this on a smaller level of granularity by changing just a word in a paragraph. All of the words in this paragraph are inheriting their properties from the surrounding paragraph, but I can change the properties of one word using the <span> tag. <span> and close that there. The <span> tag is an inline level element that's used to apply style to something in an inline context. We'll talking more about span and div later, and how they're used. But here I can insert a style, and I can say font-weight: bold, and so this will override the natural normal font-weight of the rest of the paragraph. Then it'll keep all of the other properties. It will keep the font family. It will keep the color from the body. It will keep the background color from the body. It will keep the font-family from the paragraph. Go ahead and save that and reload in the browser and you see that that word is bold. Everything else is just as it is in the rest of the paragraph. So this is in a nutshell how inheritance works. Elements inherit their properties from the other elements that they're enclosed within. So the body is wrapped around the entire document. Everything inherits from the body. The words in a paragraph inherit from the paragraph and you can use other elements like span and div to create your own context for properties to inherit. We'll see more about that in a later lesson. So this is in a nutshell how inheritance works in CSS.

Contents