Original subtitles

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 bold, 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.

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

is 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 texts

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 we'll 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

and to 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 edit 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, an H1, 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 they 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 overwrite 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 now 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 eight elements in there

with the pseudo class off 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 select 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 overwrite 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'll 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.