Instructor: There is an extremely powerful mechanism
in CSS called inheritance.
And so let's now learn all about inheritance.
And actually we already saw inheritance in action before.
So remember back at the beginning of the section,
I mentioned that for example, this element here,
so this Laura Jones which is a strong element
still gets the styles of the paragraph element
inside of which it is located, right?
So let's inspect this element here.
And so, of course, it is a strong element
and so as a default style,
and so that's the user agent style sheet, remember.
So as a default, it gets the font weight of bolt, right?
But then, here we see that also it gets inherited
from the paragraph, so from its parent element.
So here it gets the italic, the 18 pixels of a font size,
and also the line height of 1.5.
And so basically what this means is that inheritance
is a mechanism by which some styles,
so some properties get their values inherited
from parent elements to child elements.
And so, let's now use
this in a big way
by setting some styles onto the body element.
So we use the body elements to set some styles
because the body element is the parent element
of all the other elements in our HTML document.
And so, if we set certain properties in the body,
then their values will get inherited
to all of their child elements.
Now, not all properties do actually get inherited,
it is mostly the ones that are about text.
So let's start with a very simple one.
So the color, and let's set the color to red.
Now, what do you think is going to happen in this situation
given that we actually set the color
on most of these elements here already down here?
Well, let's see.
And so as we reload, nothing really changed here.
And the reason for that is that while this red color
still got inherited,
this colored property right here in this rule
did override the inherited style, okay.
So the inherited styles are easily overwritten
whenever there is any rule
that applies for the same property.
So an inherited property is very easily overwritten
by any rule which has a value for that same property.
So in a sense, we can say that inherited values
are the ones who have the lowest priority.
But anyway, if we now removed the color from here,
and let's just comment it out, then well,
all the text which does not have a color declared
will become red.
So this one here, all of this, now this one is still blue
because we're overriding it here, right?
But then, everything else is red.
And so now, what we can do is to set the text color
that we're actually interested in here in the body.
And so now, all the text is gray, such as before,
but all we have to do is to declare that value in the body,
and then this value 444 gets inherited for the color
for all of the rules which do not have a color declaration.
And now let's actually do the same with the font family.
So I will actually cut it from here and paste it here.
The same for this one.
And so once again, all the elements
got the sans-serif value here inherited
for the font family property.
All right.
And actually if we go back here one step,
so I'm just putting it back.
So you see that here, the links, they're actually still
in the serif style because nowhere in our code
we edit the font family
of sans-serif to them, right?
So now I'm doing it again here,
pasting it here and take a look what happens now.
And you see, now they are just like the rest of the text
in sans-serif.
And so, actually we no longer need this selector here,
we can just get rid of it.
And just to be sure,
I really want to clarify something here one more time.
So this is really elements inheriting values
for certain properties from one another.
So this is not conflicting selectors, or in other words,
this body selector here is not selecting
all of these elements, okay?
It does not apply to all the elements.
Instead, what we do is to declare values
for these properties here such as color and font family,
and then they simply get passed down
to all the child elements that are contained
within the body.
And so that's why we use the technique
of putting these properties that are related to text
into the body, okay?
Because these are the ones that we then want
all of the elements on the page to have.
Now, as I said before, many styles
do actually not get inherited
because that would be very impractical
for most of the properties.
For example, let's say border-top.
So if we declare a border-top of 10 pixels
and solid with our blue color
to the body, let's see what happens then.
And indeed, it simply added this blue border
to the top of our body element,
but it did not do so to all of the child elements, right?
Because again, that would be very, very impractical.
And now let's take a quick look
at a graphical representation
of inheritance to really make it crystal clear.
So here we have a very simple example of a webpage
which simply contains a navigation
and h1 one and a p element.
And on the right side, we also have some styles
for the body element, and in particular,
the color, font-size, font-family, and border-top.
Now of course, the body element here is the parent element
of all these other three elements.
And so therefore, thanks to inheritance,
all of these three elements basically get access
to these three properties that are inherited.
And again, all these three properties
are basically related to text.
While on the other hand,
the border property does not get inherited.
So not all of the properties do get inherited,
but it is mostly the ones related to text.
And I have a big list
of many of the properties that do get inherited,
so you can take a look at them if you'd like.
But anyway, let's not say that we also have a rule
for the h1 element.
And so it declares basically a new color
and a new font size, so it's bigger and it is blue.
And so what happens now is that these two declarations
do actually override the inherited styles.
Therefore, for the h1, the color is no longer gray
and the font size is no longer 16 pixels,
but instead, it is no blue and 32 pixels.
So this is a visual representation of inheritance in action
which I hope makes it a little bit more clear
so that you can really understand how it works.
So maybe take some more time looking at this
and studying this example a little bit more,
and then we will actually get one more time
back to our code.
And what I want to show you now is that inheritance
actually also works on a much smaller scale
which is something that we also do all the time.
So inheritance is not only helpful by putting styles
into the body, but also in other situations.
So let's say that we wanted to change the size
of these four links here.
That would actually be very easy.
All we would have to do is to,
let's go there.
So would be to put a class on them
and then select these links based on the class, right?
Or we could also do something like this.
So we could do nav and then select the a elements in there
with the pseudo class of link, right?
Let's say we wanted the font size to be
18 pixels.
And so you see that that actually worked.
But now let's say that we, for some reason,
also had a paragraph in here saying, this is the navigation.
And so this is now probably 22 pixels big.
Let's see, yeah, because that's the default that we set
for the paragraphs, but we also want this to be 18 pixels
just like everything here in our navigation.
So how could we do that?
Well, of course, we could add that here like this
and it would work again, right?
But we could also do it in a much better way.
So we don't need all of this.
All we need to do is to say
nav, and then set the font size to 18 pixels in here,
and then all of the rest should inherit those styles.
Now actually, the paragraph here does not inherit it
because we specifically set a font size
of 22 for the paragraphs already.
So that might not be such a good example.
Let's use a strong element here.
Okay.
And so now this should be 18 pixels
just as specified here.
So if we took this back, then let's see what we got there.
All right.
So nothing really, but now if this was here turned on,
so if we set the font size in the navigation to 18 pixels,
then now we could see that the strong element here
got the 18 pixels inherited from nav.
Okay?
And so now everything here is 18 pixels
and that's thanks to inheritance.
Okay?
So this is a technique that we use all the time,
but let's not actually get rid of the strong here.
And again, I can actually comment out this code
just like we did in CSS before
by hitting command or control slash.
All right.
And now just to finish, there is actually another way
of adding some styles to all of the elements.
So let's go back up here actually, and I will put it here.
And what I'm talking about is the universal selector
that I mentioned in the slide about conflicting selectors.
So basically, the universal selector simply selects
every single element on the page.
And so this is useful
if we actually want a certain property applied
to all elements, but which does not get inherited.
So for example, the color we want on all the elements,
but the color gets inherited
and so we can simply put it here in the body, right?
However, now imagine that we wanted the border-top
on all the elements.
So this, for example, we could paste this here
and as we reload, we would get this beautiful result.
So you see every single elements
and that includes like the EM here and the strong,
so all of them now have this border-top, right?
So not really helpful, but it helps demonstrate
that we really can apply a certain style
to every single element on the page.
Just keep in mind that this selector
is actually the one with the lowest priority.
So it would be very easy to simply override this, okay.
Let's say that here we had red on the body
and then this one would be red
and only all the other ones would be blue.
And again, because this is an element selector,
and so it has a higher priority than the universal selector.
But let's put it back,
and actually let's turn this one off right here.
So the universal selector is actually quite important.
For now, we don't have a big use case for it yet,
but we will soon,
and then I will explain it a little bit more.
But for now, what I want you to understand is
that there is a big difference
between the universal selector and the body selector.
So the universal selector simply applies
to all the elements, and there is no inheritance involved,
and therefore, this is perfect if you want to apply
a certain property that does not automatically get inherited
to all the elements.
On the other hand,
any style that we put here in the body gets inherited.
And so that's simply a completely different mechanism
than using the universal selector.