Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,490 --> 00:00:04,100
There is an extremely powerful mechanism
2
00:00:04,100 --> 00:00:07,130
in CSS called inheritance.
3
00:00:07,130 --> 00:00:10,303
And so let's now learn all about inheritance.
4
00:00:11,610 --> 00:00:15,930
And actually we already saw inheritance in action before.
5
00:00:15,930 --> 00:00:19,490
So, remember back at the beginning of the section,
6
00:00:19,490 --> 00:00:23,040
I mentioned that for example, this element here,
7
00:00:23,040 --> 00:00:26,470
so this Laura Jones, which is a strong element,
8
00:00:26,470 --> 00:00:29,720
still gets the styles of the paragraph element
9
00:00:29,720 --> 00:00:33,850
inside of which it is located, right?
10
00:00:33,850 --> 00:00:36,833
So let's inspect this element here.
11
00:00:37,670 --> 00:00:41,390
And so of course it is a strong element,
12
00:00:41,390 --> 00:00:43,800
and so as a default style,
13
00:00:43,800 --> 00:00:47,350
and so that's the user agent style sheet remember?
14
00:00:47,350 --> 00:00:52,240
So as a default, it gets the font weight of bold, right?
15
00:00:52,240 --> 00:00:55,990
But then here we see that also it gets inherited
16
00:00:55,990 --> 00:01:00,690
from the paragraph, so from its parent element.
17
00:01:00,690 --> 00:01:05,690
So here it gets the italic, the 18 pixels of a font size
18
00:01:05,690 --> 00:01:07,733
and also the line height of 1.5.
19
00:01:08,780 --> 00:01:12,270
And so basically what this means is that inheritance
20
00:01:12,270 --> 00:01:15,430
is a mechanism by which some styles
21
00:01:15,430 --> 00:01:18,750
so some properties get their values inherited
22
00:01:18,750 --> 00:01:22,150
from parent elements to child elements.
23
00:01:22,150 --> 00:01:27,150
So let's now use this in a big way
24
00:01:27,740 --> 00:01:31,793
by setting some styles onto the body element.
25
00:01:32,800 --> 00:01:36,330
So, we use the body elements to set some styles
26
00:01:36,330 --> 00:01:39,340
because the body element is the parent element
27
00:01:39,340 --> 00:01:43,110
of all the other elements in our HTML document.
28
00:01:43,110 --> 00:01:46,800
And so if we set certain properties in the body,
29
00:01:46,800 --> 00:01:49,170
then their values will get inherited
30
00:01:49,170 --> 00:01:52,260
to all of their child elements.
31
00:01:52,260 --> 00:01:55,830
Now not all properties do actually get inherited
32
00:01:55,830 --> 00:01:58,980
it is mostly the ones that are about text.
33
00:01:58,980 --> 00:02:02,160
So let's start with a very simple one,
34
00:02:02,160 --> 00:02:06,353
so the color, and let's set the color to red.
35
00:02:07,430 --> 00:02:11,070
Now what do you think is going to happen in this situation
36
00:02:11,070 --> 00:02:13,740
given that we actually set the color
37
00:02:13,740 --> 00:02:17,673
on most of these elements here already, down here?
38
00:02:18,690 --> 00:02:20,193
Well, let's see,
39
00:02:21,590 --> 00:02:25,670
and so, as we reload nothing really changed here.
40
00:02:25,670 --> 00:02:29,130
And the reason for that is that while this red color
41
00:02:29,130 --> 00:02:30,880
is still got inherited,
42
00:02:30,880 --> 00:02:33,740
this colored property right here in this rule
43
00:02:33,740 --> 00:02:37,830
did override the inherited style, okay?
44
00:02:37,830 --> 00:02:40,860
So the inherited styles are easily overwritten
45
00:02:40,860 --> 00:02:43,040
whenever there is any rule
46
00:02:43,040 --> 00:02:46,220
that applies for the same property.
47
00:02:46,220 --> 00:02:49,890
So an inherited property is very easily overwritten
48
00:02:49,890 --> 00:02:54,200
by any rule, which has a value for that same property.
49
00:02:54,200 --> 00:02:57,610
So in a sense, we can say that inherited values
50
00:02:57,610 --> 00:03:00,720
are the ones who have the lowest priority.
51
00:03:00,720 --> 00:03:03,610
But anyway if we now removed the color from here
52
00:03:04,640 --> 00:03:06,890
and let's just comment it out,
53
00:03:06,890 --> 00:03:09,610
then, well, all the texts
54
00:03:09,610 --> 00:03:13,810
which does not have a color declared will become red.
55
00:03:13,810 --> 00:03:17,100
So, this one here, all of this,
56
00:03:17,100 --> 00:03:18,570
now this one is still blue
57
00:03:18,570 --> 00:03:21,470
because we're overriding it here, right?
58
00:03:21,470 --> 00:03:24,430
But then everything else is red.
59
00:03:24,430 --> 00:03:29,140
And so now what we can do is to set the text color
60
00:03:29,140 --> 00:03:32,083
that we're actually interested in here in the body.
61
00:03:33,070 --> 00:03:36,850
And so now all the text is gray, such as before,
62
00:03:36,850 --> 00:03:41,540
but all we have to do is to declare that value in the body,
63
00:03:41,540 --> 00:03:46,210
and then this value 444 gets inherited for the color
64
00:03:46,210 --> 00:03:50,053
for all of the rules, which do not have a color declaration.
65
00:03:51,810 --> 00:03:55,680
And now let's actually do the same with the font family.
66
00:03:55,680 --> 00:03:59,230
So we'll actually cut it from here and paste it here
67
00:04:00,760 --> 00:04:02,423
the same for this one.
68
00:04:03,890 --> 00:04:06,510
And so once again, all the elements
69
00:04:06,510 --> 00:04:10,000
got the sans-serif value here inherited
70
00:04:10,000 --> 00:04:13,810
for the font family property, all right?
71
00:04:13,810 --> 00:04:17,433
And actually, if we go back here one step,
72
00:04:19,040 --> 00:04:21,250
so I'm just putting it back.
73
00:04:21,250 --> 00:04:24,360
So you see that here the links they're actually still
74
00:04:24,360 --> 00:04:27,800
in the serif style, because nowhere in our code,
75
00:04:27,800 --> 00:04:32,313
we edit the font family of sans-serif to them, right?
76
00:04:33,150 --> 00:04:36,113
So now I'm doing it again here,
77
00:04:37,250 --> 00:04:40,870
pasting it here and take a look what happens now?
78
00:04:40,870 --> 00:04:43,540
And you see now they are just like
79
00:04:43,540 --> 00:04:46,640
the rest of the text in sans-serif.
80
00:04:46,640 --> 00:04:50,870
And so actually we no longer need this selector here,
81
00:04:50,870 --> 00:04:52,170
we can just get rid of it.
82
00:04:53,070 --> 00:04:54,600
And just to be sure,
83
00:04:54,600 --> 00:04:58,110
I really want to clarify something here one more time.
84
00:04:58,110 --> 00:05:01,540
So this is really elements inheriting values
85
00:05:01,540 --> 00:05:05,010
for certain properties from one another.
86
00:05:05,010 --> 00:05:08,090
So this is not conflicting selectors
87
00:05:08,090 --> 00:05:11,100
or in other words this body selector here
88
00:05:11,100 --> 00:05:15,060
is not selecting all of these elements, okay?
89
00:05:15,060 --> 00:05:18,080
It does not apply to all the elements
90
00:05:18,080 --> 00:05:21,270
instead, what we do is to declare values
91
00:05:21,270 --> 00:05:23,200
for these properties here,
92
00:05:23,200 --> 00:05:25,890
such as color and font family.
93
00:05:25,890 --> 00:05:28,260
And then they simply get passed down
94
00:05:28,260 --> 00:05:30,200
to all the child elements
95
00:05:30,200 --> 00:05:32,750
that are contained within the body.
96
00:05:32,750 --> 00:05:35,050
And so that's why we use the technique
97
00:05:35,050 --> 00:05:38,277
of putting these properties that are related to text
98
00:05:38,277 --> 00:05:40,890
and to the body, okay?
99
00:05:40,890 --> 00:05:42,120
Because these are the ones
100
00:05:42,120 --> 00:05:46,350
that we then want all of the elements on the page to have.
101
00:05:46,350 --> 00:05:47,700
Now, as I said before,
102
00:05:47,700 --> 00:05:51,060
many styles do actually not get inherited,
103
00:05:51,060 --> 00:05:53,590
because that would be very impractical
104
00:05:53,590 --> 00:05:56,130
for most of the properties.
105
00:05:56,130 --> 00:06:00,000
For example, let's say border top,
106
00:06:00,000 --> 00:06:04,010
so if we declare a border top of 10 pixels
107
00:06:04,010 --> 00:06:08,410
and solid with our blue color to the body,
108
00:06:08,410 --> 00:06:10,013
let's see what happens then.
109
00:06:10,920 --> 00:06:14,730
And indeed it simply edit this blue border
110
00:06:14,730 --> 00:06:17,130
to the top of our body element,
111
00:06:17,130 --> 00:06:21,930
but it did not do so to all of the child elements, right?
112
00:06:21,930 --> 00:06:25,980
Because again, that would be very, very impractical.
113
00:06:25,980 --> 00:06:27,940
And now let's take a quick look
114
00:06:27,940 --> 00:06:31,120
at a graphical representation of inheritance
115
00:06:31,120 --> 00:06:33,023
to really make it crystal clear.
116
00:06:34,220 --> 00:06:37,530
So here we have a very simple example of a webpage,
117
00:06:37,530 --> 00:06:42,530
which simply contains a navigation, an H1, and a P element.
118
00:06:43,040 --> 00:06:44,310
And on the right side,
119
00:06:44,310 --> 00:06:47,500
we also have some styles for the body element
120
00:06:47,500 --> 00:06:51,080
and in particular, the color, font size, font family,
121
00:06:51,080 --> 00:06:52,950
and border top.
122
00:06:52,950 --> 00:06:55,230
Now of course the body element here
123
00:06:55,230 --> 00:06:59,280
is the parent element of all these other three elements.
124
00:06:59,280 --> 00:07:02,270
And so therefore, thanks to inheritance
125
00:07:02,270 --> 00:07:05,240
all of these three elements, basically get access
126
00:07:05,240 --> 00:07:09,310
to these three properties that are inherited.
127
00:07:09,310 --> 00:07:11,480
And again, all these three properties
128
00:07:11,480 --> 00:07:13,730
are basically related to text,
129
00:07:13,730 --> 00:07:14,950
while on the other hand,
130
00:07:14,950 --> 00:07:18,860
the border property does not get inherited.
131
00:07:18,860 --> 00:07:22,530
So not all of the properties do get inherited,
132
00:07:22,530 --> 00:07:25,770
but it is mostly the ones related to text.
133
00:07:25,770 --> 00:07:28,800
And they have a big list of many of the properties
134
00:07:28,800 --> 00:07:30,660
that do get inherited,
135
00:07:30,660 --> 00:07:34,350
so you can take a look at them if you'd like.
136
00:07:34,350 --> 00:07:37,720
But anyway, let's not say that we also have a rule
137
00:07:37,720 --> 00:07:39,890
for the H1 element.
138
00:07:39,890 --> 00:07:43,170
And so it declares basically a new color
139
00:07:43,170 --> 00:07:45,080
and a new font size.
140
00:07:45,080 --> 00:07:48,030
So it's bigger and it is blue.
141
00:07:48,030 --> 00:07:51,640
And so what happens now is that these two declarations
142
00:07:51,640 --> 00:07:55,390
do actually overwrite the inherited styles.
143
00:07:55,390 --> 00:07:59,760
Therefore for the H1, the color is no longer gray
144
00:07:59,760 --> 00:08:02,850
and the font size is no longer 16 pixels,
145
00:08:02,850 --> 00:08:06,830
but instead it is now blue and 32 pixels.
146
00:08:06,830 --> 00:08:11,290
So this is a visual representation of inheritance in action,
147
00:08:11,290 --> 00:08:14,140
which I hope makes it a little bit more clear
148
00:08:14,140 --> 00:08:16,930
so that you can really understand how it works.
149
00:08:16,930 --> 00:08:19,240
So maybe take some more time looking at this
150
00:08:19,240 --> 00:08:21,690
and studying this example a little bit more,
151
00:08:21,690 --> 00:08:24,390
and then we will actually get one more time
152
00:08:24,390 --> 00:08:25,653
back to our code.
153
00:08:27,160 --> 00:08:30,050
And what I want to show you now is that inheritance
154
00:08:30,050 --> 00:08:33,690
actually also works on a much smaller scale,
155
00:08:33,690 --> 00:08:36,700
which is something that we also do all the time.
156
00:08:36,700 --> 00:08:40,410
So inheritance is not only helpful by putting styles
157
00:08:40,410 --> 00:08:43,920
into the body, but also in other situations.
158
00:08:43,920 --> 00:08:45,750
So let's say that we wanted to change
159
00:08:45,750 --> 00:08:48,683
the size of these four links here.
160
00:08:49,540 --> 00:08:51,650
That would actually be very easy,
161
00:08:51,650 --> 00:08:56,650
all we would have to do is to let's go there.
162
00:08:56,860 --> 00:08:59,890
So would be to put a class on them
163
00:08:59,890 --> 00:09:04,890
and then select these links based on the class, right?
164
00:09:04,940 --> 00:09:09,930
Or we could also do something like this,
165
00:09:09,930 --> 00:09:13,520
so we could do nav and then select
166
00:09:13,520 --> 00:09:15,930
the eight elements in there
167
00:09:15,930 --> 00:09:20,250
with the pseudo class off link, right?
168
00:09:20,250 --> 00:09:24,827
Let's say we wanted the font size to be 18 pixels,
169
00:09:28,740 --> 00:09:31,633
and so you see that that actually worked.
170
00:09:32,600 --> 00:09:33,810
But now let's say that we,
171
00:09:33,810 --> 00:09:36,830
for some reason also had a paragraph in here
172
00:09:36,830 --> 00:09:41,373
saying this is the navigation.
173
00:09:42,420 --> 00:09:46,053
And so this is now probably 22 pixels big.
174
00:09:47,160 --> 00:09:49,360
Let's see, yeah, because that's the default
175
00:09:49,360 --> 00:09:51,780
that we set for the paragraphs,
176
00:09:51,780 --> 00:09:54,410
but we also want this to be 18 pixels,
177
00:09:54,410 --> 00:09:56,743
just like everything here in our navigation.
178
00:09:58,380 --> 00:10:00,160
So, how could we do that?
179
00:10:00,160 --> 00:10:04,570
Well, of course we could add that here like this
180
00:10:06,170 --> 00:10:09,870
and it would work again, right?
181
00:10:09,870 --> 00:10:12,673
But we could also do it in a much better way.
182
00:10:13,530 --> 00:10:15,713
So we don't need all of this,
183
00:10:16,800 --> 00:10:19,650
all we need to do is to say nav
184
00:10:20,840 --> 00:10:25,840
and then set the font size to 18 pixels in here,
185
00:10:27,620 --> 00:10:31,373
and then all of the rest should inherit those styles.
186
00:10:32,330 --> 00:10:35,810
Now actually the paragraph here does not inherit it
187
00:10:35,810 --> 00:10:39,640
because we specifically set a font size of 22
188
00:10:39,640 --> 00:10:42,140
for the paragraphs already.
189
00:10:42,140 --> 00:10:44,990
So that might not be such a good example,
190
00:10:44,990 --> 00:10:48,153
let's use a strong element here.
191
00:10:49,720 --> 00:10:53,520
Okay, and so now this should be 18 pixels
192
00:10:54,840 --> 00:10:57,170
just as specified here.
193
00:10:57,170 --> 00:11:02,170
So if we took this back, then let's see what we got there.
194
00:11:05,220 --> 00:11:08,030
All right, so nothing really,
195
00:11:08,030 --> 00:11:11,510
but now if this was here turned on,
196
00:11:11,510 --> 00:11:16,240
so if we set the font size in the navigation to 18 pixels,
197
00:11:16,240 --> 00:11:19,330
then now we could see that the strong element here
198
00:11:19,330 --> 00:11:24,330
got the 18 pixels inherited from nav, okay?
199
00:11:24,430 --> 00:11:27,180
And so now everything here is 18 pixels
200
00:11:27,180 --> 00:11:31,910
and that's thanks to inheritance, okay?
201
00:11:31,910 --> 00:11:35,080
So this is a technique that we use all the time,
202
00:11:35,080 --> 00:11:38,430
but let's not actually get rid of the strong here.
203
00:11:38,430 --> 00:11:41,490
And again, I can actually comment out this code
204
00:11:41,490 --> 00:11:43,680
just like we did in CSS before
205
00:11:43,680 --> 00:11:47,880
by hitting command or control slash, all right?
206
00:11:49,940 --> 00:11:51,460
And now just to finish,
207
00:11:51,460 --> 00:11:53,240
there is actually another way
208
00:11:53,240 --> 00:11:57,340
of adding some styles to all of the elements.
209
00:11:57,340 --> 00:12:01,720
So let's go back up here actually, and I will put it here.
210
00:12:01,720 --> 00:12:05,400
And what I'm talking about is the universal selector
211
00:12:05,400 --> 00:12:09,733
that I mentioned in the slide about conflicting selectors.
212
00:12:12,520 --> 00:12:15,130
So basically the universal selector
213
00:12:15,130 --> 00:12:19,010
simply select every single element on the page.
214
00:12:19,010 --> 00:12:21,780
And so this is useful if we actually want
215
00:12:21,780 --> 00:12:24,820
a certain property applied to all elements,
216
00:12:24,820 --> 00:12:27,363
but which does not get inherited.
217
00:12:28,220 --> 00:12:32,280
So for example, the color we want on all the elements,
218
00:12:32,280 --> 00:12:34,300
but the color gets inherited,
219
00:12:34,300 --> 00:12:38,320
and so we can simply put it here in the body, right?
220
00:12:38,320 --> 00:12:41,110
However, now imagine that we wanted
221
00:12:41,110 --> 00:12:46,110
the border top on all the elements, so this for example.
222
00:12:46,530 --> 00:12:50,140
We could paste this here and as we reload
223
00:12:50,140 --> 00:12:53,380
we would get this beautiful result.
224
00:12:53,380 --> 00:12:55,780
So you see every single elements
225
00:12:55,780 --> 00:13:00,230
and that includes like the EM here and the strong.
226
00:13:00,230 --> 00:13:05,230
So all of them now have this border top, right?
227
00:13:05,520 --> 00:13:09,120
So not really helpful, but it helps demonstrate
228
00:13:09,120 --> 00:13:11,550
that we really can apply a certain style
229
00:13:11,550 --> 00:13:14,770
to every single element on the page.
230
00:13:14,770 --> 00:13:17,260
Just keep in mind that this selector
231
00:13:17,260 --> 00:13:20,030
is actually the one with the lowest priority.
232
00:13:20,030 --> 00:13:24,730
So it would be very easy to simply overwrite this, okay?
233
00:13:24,730 --> 00:13:28,570
Let's say that here we had red on the body,
234
00:13:28,570 --> 00:13:30,870
and then this one would be red
235
00:13:30,870 --> 00:13:33,330
and only all the other ones would be blue.
236
00:13:33,330 --> 00:13:35,970
And again, because this is an element selector
237
00:13:35,970 --> 00:13:40,543
and so it has a higher priority than the universal selector.
238
00:13:41,986 --> 00:13:43,670
But let's put it back
239
00:13:43,670 --> 00:13:47,410
and actually let's turn this one off right here.
240
00:13:47,410 --> 00:13:51,470
So the universal selector is actually quite important
241
00:13:51,470 --> 00:13:54,310
for now we don't have a big use case for it yet,
242
00:13:54,310 --> 00:13:58,540
but we will soon and then I'll explain it a little bit more.
243
00:13:58,540 --> 00:14:00,770
But for now, what I want you to understand
244
00:14:00,770 --> 00:14:02,720
is that there is a big difference
245
00:14:02,720 --> 00:14:04,740
between the universal selector
246
00:14:04,740 --> 00:14:06,810
and the body selector.
247
00:14:06,810 --> 00:14:09,430
So the universal selector simply applies
248
00:14:09,430 --> 00:14:11,220
to all the elements,
249
00:14:11,220 --> 00:14:14,270
and there is no inheritance involved.
250
00:14:14,270 --> 00:14:16,150
And therefore, this is perfect
251
00:14:16,150 --> 00:14:19,010
if you want to apply a certain property,
252
00:14:19,010 --> 00:14:21,650
that does not automatically get inherited
253
00:14:21,650 --> 00:14:23,700
to all the elements.
254
00:14:23,700 --> 00:14:24,710
On the other hand,
255
00:14:24,710 --> 00:14:28,520
any style that we put here in the body gets inherited.
256
00:14:28,520 --> 00:14:31,690
And so that's simply a completely different mechanism
257
00:14:31,690 --> 00:14:33,683
than using the universal selector.
19609
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.