Tip:
Highlight text to annotate it
X
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 tag.
and close that there. The 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.