1
00:00:02,070 --> 00:00:04,530
To dive deeper into these selectors,

2
00:00:04,530 --> 00:00:08,119
I would like to make our list a bit more complex first.

3
00:00:08,119 --> 00:00:10,150
At the moment we have these full list items.

4
00:00:10,150 --> 00:00:12,293
So just the list element here,

5
00:00:13,360 --> 00:00:17,090
I would like to add a bit more information to our list

6
00:00:17,090 --> 00:00:18,800
because basically,

7
00:00:18,800 --> 00:00:23,800
what if we put that description of our challenge

8
00:00:23,830 --> 00:00:25,310
into a paragraph?

9
00:00:25,310 --> 00:00:26,870
So inside the list here,

10
00:00:26,870 --> 00:00:30,243
so take this right here and right there.

11
00:00:31,170 --> 00:00:33,540
And then ahead of this paragraph,

12
00:00:33,540 --> 00:00:36,020
we add the day and the date,

13
00:00:36,020 --> 00:00:38,180
because typically challenges are related

14
00:00:38,180 --> 00:00:40,100
to a specific date so to say.

15
00:00:40,100 --> 00:00:43,130
That is also what we can add here to our project.

16
00:00:43,130 --> 00:00:44,780
To highlight the specific date,

17
00:00:44,780 --> 00:00:46,770
we also need a specific element,

18
00:00:46,770 --> 00:00:48,887
should be the content of the element here.

19
00:00:48,887 --> 00:00:53,887
"h1" is reserved for the main heading of this website here.

20
00:00:54,270 --> 00:00:57,060
So why don't we just go for an "h2" element here

21
00:00:57,060 --> 00:01:02,060
and add, for example, Tuesday, April 2nd.

22
00:01:03,210 --> 00:01:06,810
So on this specific day, we have this challenge

23
00:01:06,810 --> 00:01:09,330
and we can, of course, also quickly format this

24
00:01:09,330 --> 00:01:11,230
to make it look a bit more structured.

25
00:01:12,430 --> 00:01:15,890
Let's apply the same logic to all our other list items.

26
00:01:15,890 --> 00:01:18,820
So here we add the "h2" element here.

27
00:01:18,820 --> 00:01:23,107
We could go for Wednesday, April 3rd,

28
00:01:27,180 --> 00:01:30,120
and then we create another paragraph

29
00:01:30,120 --> 00:01:33,483
which contains our challenge of this corresponding day.

30
00:01:35,090 --> 00:01:38,720
Then we do the same thing for our third list item here

31
00:01:39,760 --> 00:01:42,873
again, "h2" element, Thursday,

32
00:01:46,000 --> 00:01:49,343
April 4th,

33
00:01:50,600 --> 00:01:54,480
paragraph, which contains the challenge.

34
00:01:58,000 --> 00:02:02,550
And finally, one last time we add an "h2" element.

35
00:02:02,550 --> 00:02:05,153
This should be Friday, April 5th,

36
00:02:08,410 --> 00:02:09,560
and here we want to,

37
00:02:09,560 --> 00:02:11,540
well, maybe not learn about forms,

38
00:02:11,540 --> 00:02:13,220
not too happy about this goal.

39
00:02:13,220 --> 00:02:16,900
Let's maybe rather say we want to practice

40
00:02:16,900 --> 00:02:21,900
advanced HTML and CSS concepts

41
00:02:22,460 --> 00:02:24,780
to not be too specific here.

42
00:02:24,780 --> 00:02:25,953
Let's format this.

43
00:02:26,800 --> 00:02:27,633
And with that,

44
00:02:27,633 --> 00:02:30,260
we added more information to our list

45
00:02:30,260 --> 00:02:33,660
and we added paragraphs in this list here.

46
00:02:33,660 --> 00:02:36,320
So we only have paragraphs in here at the moment,

47
00:02:36,320 --> 00:02:39,020
but if we also go to our header here maybe,

48
00:02:39,020 --> 00:02:44,020
and say, well, we have challenges here for the next day.

49
00:02:44,480 --> 00:02:47,620
So to say, and I want to emphasize that.

50
00:02:47,620 --> 00:02:50,190
So we could also add another paragraph up here,

51
00:02:50,190 --> 00:02:51,580
which says exactly that,

52
00:02:51,580 --> 00:02:54,870
these are my goals for the next days.

53
00:02:54,870 --> 00:02:59,310
For example, like this, with this change in place

54
00:02:59,310 --> 00:03:02,500
we might run into a slight problem though,

55
00:03:02,500 --> 00:03:03,900
because on our website,

56
00:03:03,900 --> 00:03:07,270
we now have the paragraph here in our header

57
00:03:08,250 --> 00:03:11,540
and we have two paragraph here in all our list items.

58
00:03:11,540 --> 00:03:13,563
So this one, that one and so on.

59
00:03:15,070 --> 00:03:15,903
At the moment,

60
00:03:15,903 --> 00:03:18,840
the paragraph only has the font family property

61
00:03:18,840 --> 00:03:20,000
applied by us.

62
00:03:20,000 --> 00:03:22,880
This was done here in the shared.css file

63
00:03:22,880 --> 00:03:23,713
and that's fine.

64
00:03:24,860 --> 00:03:28,730
But if we look at our website, we see that for example,

65
00:03:28,730 --> 00:03:30,270
here for this paragraph,

66
00:03:30,270 --> 00:03:32,480
we need some more margin to the bottom here.

67
00:03:32,480 --> 00:03:34,680
Well, to get more space between the button

68
00:03:34,680 --> 00:03:36,233
and our description here.

69
00:03:38,200 --> 00:03:40,960
If it would go to our shared CSS file now,

70
00:03:40,960 --> 00:03:45,823
here, and add, for example, a margin-bottom.

71
00:03:46,720 --> 00:03:47,670
This one here,

72
00:03:47,670 --> 00:03:50,540
margin bottom simply allows us to specifically

73
00:03:50,540 --> 00:03:53,080
tailor one of the four directions for a margin

74
00:03:53,080 --> 00:03:54,010
could be applied.

75
00:03:54,010 --> 00:03:56,900
You remember we had the logic of adding a margin

76
00:03:58,030 --> 00:04:01,940
like this, for example, for pixels top, right, bottom, left,

77
00:04:01,940 --> 00:04:04,350
then we could add four pixels, eight pixels.

78
00:04:04,350 --> 00:04:07,470
So four pixels, top bottom, eight pixels left, right,

79
00:04:07,470 --> 00:04:10,700
or four pixels, four pixels, eight pixels, for example.

80
00:04:10,700 --> 00:04:14,080
So top, right, bottom and left.

81
00:04:14,080 --> 00:04:18,079
Here with margin bottom, we specifically target

82
00:04:18,079 --> 00:04:21,692
one specific margin direction that's bottom here,

83
00:04:22,590 --> 00:04:23,423
and we could set it.

84
00:04:23,423 --> 00:04:26,463
We add a bottom margin of maybe 36 pixels here.

85
00:04:27,670 --> 00:04:28,830
If we do this,

86
00:04:28,830 --> 00:04:31,930
you see that this works here for our paragraph,

87
00:04:31,930 --> 00:04:33,980
but the margin was also added here

88
00:04:33,980 --> 00:04:38,120
for the paragraphs we have in our list items.

89
00:04:38,120 --> 00:04:39,700
Definitely not what we want.

90
00:04:39,700 --> 00:04:43,090
Therefore, we should get rid of this rule right here.

91
00:04:43,090 --> 00:04:46,780
And now we should specifically target the paragraph

92
00:04:46,780 --> 00:04:48,483
where this margin should be added.

93
00:04:49,560 --> 00:04:54,210
In our case, this is this paragraph here in the header.

94
00:04:54,210 --> 00:04:57,468
And as this specific paragraph only exists

95
00:04:57,468 --> 00:05:00,360
once in our website, we can use a selector.

96
00:05:00,360 --> 00:05:01,650
We already used in the course,

97
00:05:01,650 --> 00:05:05,200
and that's the so-called "ID selector".

98
00:05:05,200 --> 00:05:09,340
The ID selector was used here in the index HTML file,

99
00:05:09,340 --> 00:05:11,760
that's it, so we can create it again.

100
00:05:11,760 --> 00:05:14,140
So we add the ID attribute

101
00:05:14,140 --> 00:05:17,060
and maybe call this ID description

102
00:05:17,060 --> 00:05:21,073
as it describes, well, what is displayed on this website.

103
00:05:22,910 --> 00:05:26,720
With the ID being created in our full week CSS file,

104
00:05:26,720 --> 00:05:31,320
maybe here below the "h1" element we can refer now to this

105
00:05:31,320 --> 00:05:34,653
ID with the hashtag and then the ID name.

106
00:05:36,070 --> 00:05:39,140
And here we then add our margin bottom

107
00:05:39,140 --> 00:05:41,830
as we just did it for all paragraphs again,

108
00:05:41,830 --> 00:05:43,843
with this 36 pixels.

109
00:05:44,950 --> 00:05:45,990
Going back to the website, you'll see,

110
00:05:45,990 --> 00:05:47,910
we now have this nice distance

111
00:05:47,910 --> 00:05:50,320
between our free elements here

112
00:05:50,320 --> 00:05:54,093
without changing the margin here for our list items.

113
00:05:55,040 --> 00:05:59,240
We can also target our element differently though,

114
00:05:59,240 --> 00:06:01,420
because if you look at our structure,

115
00:06:01,420 --> 00:06:05,050
we have the header here, this one, and inside the header,

116
00:06:05,050 --> 00:06:07,260
we have this paragraph.

117
00:06:07,260 --> 00:06:09,840
This means the paragraph is a so-called

118
00:06:09,840 --> 00:06:11,683
descendant of the header.

119
00:06:12,530 --> 00:06:16,190
And we also had such a so-called combinator.

120
00:06:16,190 --> 00:06:18,330
So now we use the ID selector,

121
00:06:18,330 --> 00:06:20,370
but with the descendant combinator,

122
00:06:20,370 --> 00:06:24,220
we can also target exactly this specific paragraph

123
00:06:24,220 --> 00:06:28,253
as it's the only paragraph here inside our header element.

124
00:06:30,050 --> 00:06:31,060
How does this work?

125
00:06:31,060 --> 00:06:34,910
Well, if we comment out our ID selector

126
00:06:34,910 --> 00:06:38,320
and now refer to our header, add a space,

127
00:06:38,320 --> 00:06:40,843
and now the paragraph like this,

128
00:06:42,120 --> 00:06:45,540
so this means we want to target all paragraphs,

129
00:06:45,540 --> 00:06:48,800
which are descendants of the header element.

130
00:06:48,800 --> 00:06:52,370
And if we also add margin bottom right here now

131
00:06:53,470 --> 00:06:55,083
of 36 pixels.

132
00:06:56,120 --> 00:06:59,203
Then you get exactly the same result as before

133
00:06:59,203 --> 00:07:01,990
without adding the ID.

134
00:07:01,990 --> 00:07:04,390
Now, which one should you use?

135
00:07:04,390 --> 00:07:07,220
Well, it depends to be honest.

136
00:07:07,220 --> 00:07:10,350
In this course, we'll add a mix of combinators

137
00:07:10,350 --> 00:07:13,820
and selectors also to practice these concepts.

138
00:07:13,820 --> 00:07:18,170
In real world projects, we typically rather use combinators

139
00:07:18,170 --> 00:07:20,440
than too many IDs and so-called classes,

140
00:07:20,440 --> 00:07:22,410
which we'll cover in a few minutes.

141
00:07:22,410 --> 00:07:24,370
It's just important for you to understand

142
00:07:24,370 --> 00:07:27,170
that you have different ways to specifically select

143
00:07:27,170 --> 00:07:28,433
the elements you need.

144
00:07:29,340 --> 00:07:31,230
Talking about specific elements,

145
00:07:31,230 --> 00:07:35,870
let's also go to our list items here once again.

146
00:07:35,870 --> 00:07:37,683
Because for the list items,

147
00:07:39,170 --> 00:07:44,170
if we scroll down a bit and maybe also format this quickly,

148
00:07:44,670 --> 00:07:47,490
so like this for these list items,

149
00:07:47,490 --> 00:07:51,150
I also want to apply the concepts we just learned about.

150
00:07:51,150 --> 00:07:53,730
I want to make sure that both the paragraph

151
00:07:53,730 --> 00:07:56,270
and the "h2" elements.

152
00:07:56,270 --> 00:08:00,270
So basically the content of our specific list items.

153
00:08:00,270 --> 00:08:01,840
So this one and that one.

154
00:08:01,840 --> 00:08:06,440
The "h2" element should have a slightly different color

155
00:08:06,440 --> 00:08:08,720
and a different font family.

156
00:08:08,720 --> 00:08:11,310
Because at the moment we have this several font family,

157
00:08:11,310 --> 00:08:13,360
which I don't think looks good.

158
00:08:13,360 --> 00:08:14,350
And for the paragraph,

159
00:08:14,350 --> 00:08:17,310
I want to reduce the margin a bit because of the distance

160
00:08:17,310 --> 00:08:20,980
is a bit too big between these two types of information.

161
00:08:20,980 --> 00:08:25,980
And at the moment we have the default margin being applied

162
00:08:26,230 --> 00:08:29,830
here for paragraph elements by the browser.

163
00:08:29,830 --> 00:08:33,683
So we have to select the "h2" element and the paragraph.

164
00:08:33,683 --> 00:08:36,200
For the "h2" element it's quite straightforward.

165
00:08:36,200 --> 00:08:40,190
We only have the "h2" elements here in our list items.

166
00:08:40,190 --> 00:08:42,919
Therefore, the normal type selector is sufficient.

167
00:08:42,919 --> 00:08:46,350
For the paragraph things are a bit different though.

168
00:08:46,350 --> 00:08:48,670
Let's get started with the "h2" element though,

169
00:08:48,670 --> 00:08:50,230
and that's quite straightforward.

170
00:08:50,230 --> 00:08:52,720
We can just select "h2" in here.

171
00:08:52,720 --> 00:08:55,820
And now I prepared another color here

172
00:08:55,820 --> 00:08:58,713
with an "RGB" code of 78,

173
00:09:03,940 --> 00:09:04,773
13,

174
00:09:07,230 --> 00:09:08,563
and 5.

175
00:09:10,240 --> 00:09:12,960
Now you see, we have this slightly reddish tone in here,

176
00:09:12,960 --> 00:09:15,100
which looks better already.

177
00:09:15,100 --> 00:09:17,963
And we'll also apply a different font family.

178
00:09:19,010 --> 00:09:21,570
Here we will use Oswald

179
00:09:23,050 --> 00:09:26,760
and sans-Serif as a fallback.

180
00:09:26,760 --> 00:09:29,473
With that our page looks a lot better already.

181
00:09:30,680 --> 00:09:33,253
Now what about the paragraphs though in here?

182
00:09:34,160 --> 00:09:37,020
We have plenty of options to tackle these.

183
00:09:37,020 --> 00:09:39,320
First option could, of course, be well,

184
00:09:39,320 --> 00:09:43,240
we use again a combinator and say something like,

185
00:09:43,240 --> 00:09:47,810
well, all paragraphs inside our main element.

186
00:09:47,810 --> 00:09:50,560
So main "p" as we had it before,

187
00:09:50,560 --> 00:09:55,560
if I would now add a margin of 12 pixels, for example.

188
00:09:56,190 --> 00:09:59,200
This supplied us,

189
00:09:59,200 --> 00:10:01,360
doesn't make a big difference to be honest.

190
00:10:01,360 --> 00:10:04,680
But if we go to our element in here

191
00:10:05,770 --> 00:10:07,750
and select the paragraph, then you see,

192
00:10:07,750 --> 00:10:09,580
we now have just 12 pixel margin.

193
00:10:09,580 --> 00:10:10,483
So this worked.

194
00:10:11,790 --> 00:10:15,200
Besides that, I would also like to use

195
00:10:15,200 --> 00:10:17,130
a different color again.

196
00:10:17,130 --> 00:10:19,750
This should be the color with the code

197
00:10:20,830 --> 00:10:22,930
71,

198
00:10:22,930 --> 00:10:23,913
29,

199
00:10:25,240 --> 00:10:26,443
and 22.

200
00:10:28,100 --> 00:10:29,890
Now we have that slightly different color.

201
00:10:29,890 --> 00:10:32,600
It's hard to see, it's just about the slide changes

202
00:10:32,600 --> 00:10:34,270
we applied here, but if you scroll up,

203
00:10:34,270 --> 00:10:36,140
you see this color is applied.

204
00:10:36,140 --> 00:10:38,273
As you see, it's a bit better to read now.

205
00:10:39,530 --> 00:10:42,573
So this is one way to use this descendant combinator.