1
00:00:02,100 --> 00:00:04,510
Thankfully, everything we just saw

2
00:00:04,510 --> 00:00:08,300
is based on certain and clear defined rules,

3
00:00:08,300 --> 00:00:11,000
which control the logic of CSS.

4
00:00:11,000 --> 00:00:14,470
And these rules are based on three key terms.

5
00:00:14,470 --> 00:00:16,250
On inheritance,

6
00:00:16,250 --> 00:00:17,350
cascading,

7
00:00:17,350 --> 00:00:18,950
so the cascading logic

8
00:00:18,950 --> 00:00:21,620
in the term cascading style sheets,

9
00:00:21,620 --> 00:00:23,830
and specificity.

10
00:00:23,830 --> 00:00:25,730
Understanding these three terms

11
00:00:25,730 --> 00:00:27,600
and how they work is crucial

12
00:00:27,600 --> 00:00:29,860
to really know what is going on

13
00:00:29,860 --> 00:00:31,680
in our CSS logic here,

14
00:00:31,680 --> 00:00:33,210
and also helps us a lot

15
00:00:33,210 --> 00:00:35,613
to easily style our webpage.

16
00:00:36,580 --> 00:00:39,500
Let's get started with this inheritance concept.

17
00:00:39,500 --> 00:00:41,510
We saw it already in the developer tools

18
00:00:41,510 --> 00:00:44,120
with this inherited from information.

19
00:00:44,120 --> 00:00:45,920
Inheritance simply means

20
00:00:45,920 --> 00:00:48,300
that selected container rules

21
00:00:48,300 --> 00:00:51,170
apply to descendants.

22
00:00:51,170 --> 00:00:52,800
Selected is important here.

23
00:00:52,800 --> 00:00:55,840
Not all rules are applied to descendants,

24
00:00:55,840 --> 00:00:57,300
which wouldn't make too much sense.

25
00:00:57,300 --> 00:00:59,530
If you, for example, have a width

26
00:00:59,530 --> 00:01:01,670
defined for a parent element,

27
00:01:01,670 --> 00:01:04,700
you'll probably don't want to have all your descendants

28
00:01:04,700 --> 00:01:06,100
to have the same width.

29
00:01:06,100 --> 00:01:08,901
But common sense here really is a big helper

30
00:01:08,901 --> 00:01:11,920
to understand which rules

31
00:01:11,920 --> 00:01:13,740
are inherited and which not.

32
00:01:13,740 --> 00:01:14,980
So no need to learn anything

33
00:01:14,980 --> 00:01:16,970
like these properties are inherited,

34
00:01:16,970 --> 00:01:18,350
these are not.

35
00:01:18,350 --> 00:01:20,670
And if we go back to the project,

36
00:01:20,670 --> 00:01:23,510
we saw this inheritance concept

37
00:01:23,510 --> 00:01:25,220
in action a lot of times.

38
00:01:25,220 --> 00:01:27,460
For example, here, in the body,

39
00:01:27,460 --> 00:01:30,100
we defined the color,

40
00:01:30,100 --> 00:01:32,500
and we saw that in our h1 element.

41
00:01:32,500 --> 00:01:35,180
We inherited this color property here

42
00:01:35,180 --> 00:01:36,293
from the body.

43
00:01:37,410 --> 00:01:38,640
Same thing is true,

44
00:01:38,640 --> 00:01:40,410
if we go back to the body once again,

45
00:01:40,410 --> 00:01:44,320
for our text align.

46
00:01:44,320 --> 00:01:46,660
Center rule we added here.

47
00:01:46,660 --> 00:01:48,330
This rule is also inherited

48
00:01:48,330 --> 00:01:50,340
by our ordered list, for example.

49
00:01:50,340 --> 00:01:52,220
So if you go back here, you see inherited

50
00:01:52,220 --> 00:01:54,040
from the body text align center.

51
00:01:54,040 --> 00:01:55,530
So this is this concept.

52
00:01:55,530 --> 00:01:56,710
If you have a container,

53
00:01:56,710 --> 00:01:59,440
then elements nested into this container

54
00:01:59,440 --> 00:02:02,370
inherit certain properties.

55
00:02:02,370 --> 00:02:05,050
With this inheritance logic being in place,

56
00:02:05,050 --> 00:02:07,190
another logic is important.

57
00:02:07,190 --> 00:02:10,639
That's this cascading logic in CSS.

58
00:02:10,639 --> 00:02:13,270
Cascading means that multiple rules

59
00:02:13,270 --> 00:02:17,070
can be applied to the same element.

60
00:02:17,070 --> 00:02:20,460
Also something we saw in action in our project.

61
00:02:20,460 --> 00:02:24,030
If we, for example, go again to our ordered list here,

62
00:02:24,030 --> 00:02:26,020
we know that the ordered list inherits

63
00:02:26,020 --> 00:02:28,760
the text align property and the color property.

64
00:02:28,760 --> 00:02:32,330
So these rules are applied from the body,

65
00:02:32,330 --> 00:02:34,456
so to say, to our element.

66
00:02:34,456 --> 00:02:37,600
But at the same time here, in our ordered list,

67
00:02:37,600 --> 00:02:40,410
we added this list-style none property.

68
00:02:40,410 --> 00:02:42,440
So this means we have one element

69
00:02:42,440 --> 00:02:44,970
with different rules being applied.

70
00:02:44,970 --> 00:02:47,580
One of the rules being applied directly to the element,

71
00:02:47,580 --> 00:02:50,663
the other one being inherited from another element.

72
00:02:51,500 --> 00:02:53,090
The cascading nature here

73
00:02:53,090 --> 00:02:55,590
is therefore important to make this possible.

74
00:02:55,590 --> 00:02:57,370
Otherwise something like inheritance,

75
00:02:57,370 --> 00:02:58,743
well, wouldn't take place.

76
00:02:59,770 --> 00:03:02,040
The cascading logic is important

77
00:03:02,040 --> 00:03:05,090
for another core concept in CSS, though.

78
00:03:05,090 --> 00:03:06,910
For this, let's go to the code

79
00:03:06,910 --> 00:03:11,090
and let's maybe delete these unrequired color codes here.

80
00:03:11,090 --> 00:03:12,340
Don't need these anymore.

81
00:03:13,470 --> 00:03:14,860
And now let me comment back

82
00:03:14,860 --> 00:03:18,210
in this list-style none property.

83
00:03:18,210 --> 00:03:20,200
And let's just focus onto this list here

84
00:03:20,200 --> 00:03:22,140
and forget about the ordered list for a moment.

85
00:03:22,140 --> 00:03:24,710
Here, we have the same property twice.

86
00:03:24,710 --> 00:03:25,980
List-style, list-style,

87
00:03:25,980 --> 00:03:27,430
square, and none.

88
00:03:27,430 --> 00:03:28,920
Now what's happening is that,

89
00:03:28,920 --> 00:03:31,083
if we also comment out this here,

90
00:03:32,210 --> 00:03:35,950
if we go back, we don't have any list-style applied.

91
00:03:35,950 --> 00:03:39,230
So these square bullet points are not displayed.

92
00:03:39,230 --> 00:03:40,330
Why is this the case?

93
00:03:40,330 --> 00:03:42,050
Well, because list-style none

94
00:03:42,050 --> 00:03:43,893
wins over list-style square.

95
00:03:45,440 --> 00:03:48,050
What happens if we switch the order?

96
00:03:48,050 --> 00:03:51,400
So if list-style none is the first one

97
00:03:51,400 --> 00:03:53,723
and afterwards comes list-style square.

98
00:03:54,810 --> 00:03:56,150
Let's see.

99
00:03:56,150 --> 00:03:58,280
Now the list-style square rule wins.

100
00:03:58,280 --> 00:04:00,053
Why is this the case?

101
00:04:00,053 --> 00:04:02,430
Well, because the cascading logic

102
00:04:02,430 --> 00:04:04,230
not only means that multiple rules

103
00:04:04,230 --> 00:04:05,740
can be applied to an element

104
00:04:05,740 --> 00:04:07,310
from different starting points,

105
00:04:07,310 --> 00:04:09,460
so from inheriting the rules from the body

106
00:04:09,460 --> 00:04:12,410
and applying it to the element directly,

107
00:04:12,410 --> 00:04:16,373
but also from inside such a selector, so to say.

108
00:04:17,709 --> 00:04:18,860
And if this is the case,

109
00:04:18,860 --> 00:04:20,810
so if you have this rule multiple times,

110
00:04:20,810 --> 00:04:24,570
well, then always the latest applied rule wins.

111
00:04:24,570 --> 00:04:27,580
So the order matters, so to say.

112
00:04:27,580 --> 00:04:29,070
Well, if we follow this logic,

113
00:04:29,070 --> 00:04:31,823
then if we comment in our ordered list here.

114
00:04:32,660 --> 00:04:34,860
And if you position this ordered list

115
00:04:34,860 --> 00:04:37,030
below our list items,

116
00:04:37,030 --> 00:04:40,280
then we first define the styling for the list items.

117
00:04:40,280 --> 00:04:42,240
Here list-style square would win.

118
00:04:42,240 --> 00:04:44,880
But afterwards, so later in our order,

119
00:04:44,880 --> 00:04:46,470
we have list-style none.

120
00:04:46,470 --> 00:04:48,413
Let's quickly format this, by the way.

121
00:04:49,260 --> 00:04:50,350
We have list-style none.

122
00:04:50,350 --> 00:04:52,500
So if the cascading logic is

123
00:04:52,500 --> 00:04:54,580
that the latest applied style wins,

124
00:04:54,580 --> 00:04:57,440
then we shouldn't have any bullet points now.

125
00:04:57,440 --> 00:04:59,140
Let's see if this works.

126
00:04:59,140 --> 00:05:01,090
No, it doesn't.

127
00:05:01,090 --> 00:05:02,973
So what is going on here now?

128
00:05:04,260 --> 00:05:05,550
Well, for cases like this,

129
00:05:05,550 --> 00:05:08,140
we have another core concept in CSS,

130
00:05:08,140 --> 00:05:10,223
and this is specificity.

131
00:05:11,232 --> 00:05:15,010
Specificity means that the more specific selector's rule

132
00:05:15,010 --> 00:05:19,000
wins over the less specific selector.

133
00:05:19,000 --> 00:05:21,600
Now what does specific mean here?

134
00:05:21,600 --> 00:05:23,970
Well, in our code, we have the ordered list

135
00:05:23,970 --> 00:05:25,163
and the list item.

136
00:05:26,180 --> 00:05:27,940
If I select the ordered list,

137
00:05:27,940 --> 00:05:30,970
I directly select this specific element

138
00:05:30,970 --> 00:05:33,210
and children of this element

139
00:05:33,210 --> 00:05:35,003
can inherit properties.

140
00:05:35,900 --> 00:05:38,410
But if I directly select the list item,

141
00:05:38,410 --> 00:05:40,570
well, this is more specific, right?

142
00:05:40,570 --> 00:05:44,260
I specifically target this element.

143
00:05:44,260 --> 00:05:46,090
Therefore, in such cases,

144
00:05:46,090 --> 00:05:48,030
the more specific selector

145
00:05:48,030 --> 00:05:51,230
wins over the less specific one.

146
00:05:51,230 --> 00:05:53,040
Therefore, the order logic

147
00:05:53,040 --> 00:05:54,230
doesn't play a role here.

148
00:05:54,230 --> 00:05:55,860
Specificity is important

149
00:05:55,860 --> 00:05:58,500
to define which rule is applied.

150
00:05:58,500 --> 00:06:01,090
We can still position the ordered list above here, though,

151
00:06:01,090 --> 00:06:03,740
to keep the logical flow in our project.

152
00:06:03,740 --> 00:06:05,120
But here it's important

153
00:06:05,120 --> 00:06:07,100
which selector am I using right here

154
00:06:07,100 --> 00:06:08,033
and right there.

155
00:06:09,330 --> 00:06:11,330
And this logic can also be found

156
00:06:11,330 --> 00:06:14,470
in our project in other places.

157
00:06:14,470 --> 00:06:16,180
As we learned, we actually defined

158
00:06:16,180 --> 00:06:18,750
a color here in our body element,

159
00:06:18,750 --> 00:06:20,830
and this color would be inherited

160
00:06:20,830 --> 00:06:22,763
as it is the case for the h1 element.

161
00:06:23,960 --> 00:06:25,910
For the anchor tag this is not working

162
00:06:25,910 --> 00:06:27,700
because well, the anchor tag

163
00:06:27,700 --> 00:06:29,830
would inherit the color from the body,

164
00:06:29,830 --> 00:06:31,990
but we have a strikethrough here

165
00:06:31,990 --> 00:06:33,920
because, we talked about this,

166
00:06:33,920 --> 00:06:36,040
we have a default color being applied

167
00:06:36,040 --> 00:06:39,320
by the browser for anchor tags, so for links.

168
00:06:39,320 --> 00:06:41,580
So this specific link color,

169
00:06:41,580 --> 00:06:43,790
this specific browser default color,

170
00:06:43,790 --> 00:06:45,780
is more specific, so to say,

171
00:06:45,780 --> 00:06:47,293
than the inherited color.

172
00:06:48,210 --> 00:06:50,500
But what is even more specific

173
00:06:50,500 --> 00:06:53,000
is the direct color we added

174
00:06:53,000 --> 00:06:56,130
in our type selector here,

175
00:06:56,130 --> 00:06:56,963
the anchor tag.

176
00:06:56,963 --> 00:06:58,800
So this is the most specific one,

177
00:06:58,800 --> 00:07:01,453
therefore this color is winning here.

178
00:07:02,810 --> 00:07:05,040
Now, this can be a bit complex

179
00:07:05,040 --> 00:07:07,840
when first being confronted with these concepts,

180
00:07:07,840 --> 00:07:09,040
but you will get used to it

181
00:07:09,040 --> 00:07:10,830
the more you work with CSS.

182
00:07:10,830 --> 00:07:13,103
Always keep in mind this flow though.

183
00:07:14,110 --> 00:07:15,170
We have the inheritance,

184
00:07:15,170 --> 00:07:16,730
which means that certain properties

185
00:07:16,730 --> 00:07:19,083
are applied to descendants of the parent.

186
00:07:20,040 --> 00:07:21,600
We have the cascading logic,

187
00:07:21,600 --> 00:07:24,100
which allows us to apply multiple rules

188
00:07:24,100 --> 00:07:26,130
to the same element,

189
00:07:26,130 --> 00:07:28,550
and also defines that the latest rule

190
00:07:28,550 --> 00:07:30,240
in a specific selector wins

191
00:07:30,240 --> 00:07:31,730
if we have the same rule,

192
00:07:31,730 --> 00:07:34,063
the same property twice or more.

193
00:07:35,020 --> 00:07:36,750
And we have the specificity,

194
00:07:36,750 --> 00:07:39,800
which defines which rule wins in the end,

195
00:07:39,800 --> 00:07:42,170
so which is the more specific rule,

196
00:07:42,170 --> 00:07:45,023
the more specific way to select an element.

197
00:07:46,240 --> 00:07:48,370
So this was a lot of important theory now.

198
00:07:48,370 --> 00:07:50,160
Now it's time to go back

199
00:07:50,160 --> 00:07:53,310
to a bit more of the styling part of this course.

200
00:07:53,310 --> 00:07:56,600
So let's continue with the styling of our website

201
00:07:56,600 --> 00:07:59,093
with keeping these new concepts in mind, though.