1
00:00:02,156 --> 00:00:05,700
An alternative would be to use the concept of classes.

2
00:00:06,970 --> 00:00:10,700
Classes allow us to group specific elements together

3
00:00:10,700 --> 00:00:12,763
where the same styles should be applied.

4
00:00:13,680 --> 00:00:14,660
How does this work?

5
00:00:14,660 --> 00:00:17,180
Well in our full week HTML file,

6
00:00:17,180 --> 00:00:19,640
we could say that all these paragraphs in here

7
00:00:19,640 --> 00:00:21,350
have a specific class.

8
00:00:21,350 --> 00:00:23,630
So class, is again an attribute

9
00:00:23,630 --> 00:00:27,530
which could be daily goal.

10
00:00:27,530 --> 00:00:31,360
For example, if we use this now

11
00:00:31,360 --> 00:00:32,673
and edit right here,

12
00:00:34,080 --> 00:00:36,720
there, and right there,

13
00:00:36,720 --> 00:00:39,990
then we have this class applied multiple times in contrast

14
00:00:39,990 --> 00:00:43,570
to ID classes can be used multiple times

15
00:00:44,550 --> 00:00:46,050
and then a full week CSS file

16
00:00:46,050 --> 00:00:49,480
we cannot comment out our Combinator here

17
00:00:49,480 --> 00:00:51,940
and now refer to the class with the dot.

18
00:00:51,940 --> 00:00:54,340
That's, how we refer to class names

19
00:00:54,340 --> 00:00:56,953
and refer to our daily goal class in here,

20
00:00:57,960 --> 00:01:02,030
which should actually have the same rules applied

21
00:01:02,940 --> 00:01:04,123
as we had it before.

22
00:01:05,269 --> 00:01:07,420
And if we go back, you'll see, we have,

23
00:01:07,420 --> 00:01:10,930
now this class also here in our dev tools and the margin

24
00:01:10,930 --> 00:01:13,233
and the color is still applied.

25
00:01:14,170 --> 00:01:16,573
So this would be one of the alternatives here,

26
00:01:17,650 --> 00:01:22,150
but what if we comment in now this Combinator here,

27
00:01:22,150 --> 00:01:25,110
by the way, if we do that, save it.

28
00:01:25,110 --> 00:01:28,170
What happens website is still styled,

29
00:01:28,170 --> 00:01:30,313
but which style was applied?

30
00:01:31,250 --> 00:01:34,120
Well, the daily goal style was applied here.

31
00:01:34,120 --> 00:01:35,320
See it in our dev tools

32
00:01:36,230 --> 00:01:40,290
because here specificity comes into play again.

33
00:01:40,290 --> 00:01:44,000
The normal element selector is less specific

34
00:01:44,000 --> 00:01:47,680
than a combination would be because the paragraph selector,

35
00:01:47,680 --> 00:01:51,653
for example, here, this one would apply to all paragraphs.

36
00:01:52,580 --> 00:01:57,500
The main P Combinator here only applies to paragraphs,

37
00:01:57,500 --> 00:01:59,630
which are descendants of the main element.

38
00:01:59,630 --> 00:02:01,890
So it's more specific.

39
00:02:01,890 --> 00:02:05,040
And the class here is even more specific

40
00:02:05,040 --> 00:02:08,199
because only elements with this specific class

41
00:02:08,199 --> 00:02:10,600
have this certain style applied.

42
00:02:10,600 --> 00:02:13,780
So as we talked about it, the concept of specificity here,

43
00:02:13,780 --> 00:02:15,570
again, follows common sense.

44
00:02:15,570 --> 00:02:17,710
Therefore, it's pretty easy to remember

45
00:02:17,710 --> 00:02:19,050
once you get used to it

46
00:02:20,450 --> 00:02:22,820
still, I want to keep

47
00:02:22,820 --> 00:02:25,920
the currently not working Combinator here

48
00:02:25,920 --> 00:02:28,180
because we could use our classes

49
00:02:28,180 --> 00:02:30,203
for something different here.

50
00:02:31,160 --> 00:02:33,660
I mentioned that it would be great if we could have

51
00:02:33,660 --> 00:02:35,930
something like to highlight goals.

52
00:02:35,930 --> 00:02:38,090
So very important goals we should achieve

53
00:02:40,020 --> 00:02:42,780
in our full big HTML file. This could, for example,

54
00:02:42,780 --> 00:02:45,110
be our second goal here.

55
00:02:45,110 --> 00:02:48,400
So to do the exercises and also this one,

56
00:02:48,400 --> 00:02:50,810
the third one to dive deeper,

57
00:02:50,810 --> 00:02:53,870
these could be very important goals because if we practice

58
00:02:53,870 --> 00:02:56,320
what we learned, we made sure we understood what we learned.

59
00:02:56,320 --> 00:02:57,530
And if we didn't dive deeper,

60
00:02:57,530 --> 00:02:59,650
we can do the next step.

61
00:02:59,650 --> 00:03:01,980
For this, we can also use a class,

62
00:03:01,980 --> 00:03:05,270
but not being applied to the paragraph, of course,

63
00:03:05,270 --> 00:03:07,950
because I want to highlight the entire list item here.

64
00:03:07,950 --> 00:03:12,640
So let's delete all our classes right here,

65
00:03:12,640 --> 00:03:13,473
this one

66
00:03:15,227 --> 00:03:16,060
and that one.

67
00:03:17,260 --> 00:03:20,940
And let's not add the class to the specific list items.

68
00:03:20,940 --> 00:03:24,370
So again, we can combine or select specific elements,

69
00:03:24,370 --> 00:03:26,170
which should have a common style.

70
00:03:26,170 --> 00:03:30,940
So let's say class should be highlight goal here,

71
00:03:30,940 --> 00:03:34,870
for example, and apply the same class here to this list.

72
00:03:34,870 --> 00:03:38,393
Item class is highlight goal.

73
00:03:39,930 --> 00:03:42,840
Now what should happen to this highlight goal?

74
00:03:42,840 --> 00:03:45,840
Well, at the moment, in our full week CSS file,

75
00:03:45,840 --> 00:03:47,960
we have this background color

76
00:03:47,960 --> 00:03:49,763
being applied to the list items.

77
00:03:50,730 --> 00:03:51,830
And as we just learned,

78
00:03:51,830 --> 00:03:56,570
the type selector here is the least specific selector.

79
00:03:56,570 --> 00:03:58,420
Therefore, if we now take

80
00:03:58,420 --> 00:04:00,300
the background color property

81
00:04:00,300 --> 00:04:02,943
and renamed daily goal to highlight goal,

82
00:04:04,370 --> 00:04:06,963
and also delete these properties in here,

83
00:04:07,830 --> 00:04:09,970
paste the background color,

84
00:04:09,970 --> 00:04:12,930
and now hover over it to open this help,

85
00:04:12,930 --> 00:04:14,950
but here in visual studio code,

86
00:04:14,950 --> 00:04:18,540
and let's make this maybe slightly more reddish.

87
00:04:18,540 --> 00:04:21,329
It's just a slight change like this.

88
00:04:21,329 --> 00:04:24,263
So we have 2, 2, 2, 4 1, 2, 4, and 1, 1, 1 year.

89
00:04:25,170 --> 00:04:27,113
If we save this, go back,

90
00:04:28,030 --> 00:04:32,210
you see if we now have a slight darker background color for

91
00:04:32,210 --> 00:04:34,810
these two goals, maybe a bit to slide, to be honest.

92
00:04:34,810 --> 00:04:37,263
So let's maybe put this a bit more to the right.

93
00:04:39,750 --> 00:04:42,457
Like this. So 2, 2 6 1 1 5 1 0 1.

94
00:04:43,430 --> 00:04:45,160
Yeah. Now I think it's more evident.

95
00:04:45,160 --> 00:04:48,840
Now we have these two goals highlighted a little bit to make

96
00:04:48,840 --> 00:04:51,940
sure that these are our core goals.

97
00:04:51,940 --> 00:04:54,070
And again, we used another selector here,

98
00:04:54,070 --> 00:04:56,610
which is more specific than the type selector here with the

99
00:04:56,610 --> 00:05:00,330
list item, therefore for the other list items,

100
00:05:00,330 --> 00:05:02,820
which don't have the specific class applied

101
00:05:02,820 --> 00:05:07,680
our well, default color, so to say 40 list items is applied,

102
00:05:07,680 --> 00:05:10,050
but with the more specific class selector,

103
00:05:10,050 --> 00:05:13,130
we added the background color to the elements which have

104
00:05:13,130 --> 00:05:14,560
this selector applied

105
00:05:16,750 --> 00:05:19,402
With that we improved our styles a lot.

106
00:05:19,402 --> 00:05:20,820
What is still don't like here,

107
00:05:20,820 --> 00:05:24,610
is the gap between our header and the main part here.

108
00:05:24,610 --> 00:05:26,890
So we should add a bit more margin

109
00:05:26,890 --> 00:05:28,810
to make sure this increases

110
00:05:28,810 --> 00:05:31,410
for this in our full weeks CSS file

111
00:05:31,410 --> 00:05:32,750
on top, maybe

112
00:05:32,750 --> 00:05:35,310
we can use the header pipe selector here

113
00:05:36,320 --> 00:05:41,223
and also add margin bottom bit more here of 64 pixels.

114
00:05:42,310 --> 00:05:43,410
Let's see. Yeah.

115
00:05:43,410 --> 00:05:45,210
I think that this looks a lot better

116
00:05:46,330 --> 00:05:48,970
and what we could also do as well

117
00:05:48,970 --> 00:05:51,810
We could go with the ID selector here,

118
00:05:51,810 --> 00:05:54,270
maybe for the description of our challenge.

119
00:05:54,270 --> 00:05:55,103
As I said,

120
00:05:55,103 --> 00:05:57,020
both alternatives are possible here,

121
00:05:57,020 --> 00:05:59,670
but as we want to practice as many selectors

122
00:05:59,670 --> 00:06:01,430
and combinators as possible,

123
00:06:01,430 --> 00:06:04,290
we'll go for the ID selector here

124
00:06:05,910 --> 00:06:08,040
for D descendant Combinator there

125
00:06:08,040 --> 00:06:09,210
and at the bottom,

126
00:06:09,210 --> 00:06:11,920
we'll go with the class selector.

127
00:06:11,920 --> 00:06:13,630
With this we're coming closer towards

128
00:06:13,630 --> 00:06:16,012
the end of this diving deeper module,

129
00:06:16,012 --> 00:06:19,040
there is just one less core concept missing.

130
00:06:19,040 --> 00:06:20,290
We should have a look at.