1
00:00:02,150 --> 00:00:05,010
So how did it go? We're you successful?

2
00:00:05,010 --> 00:00:07,360
Let's solve this together now.

3
00:00:07,360 --> 00:00:09,020
Well, first we have to decide

4
00:00:09,020 --> 00:00:11,520
which list type you want to use here.

5
00:00:11,520 --> 00:00:14,320
As I said, if we have a specific order,

6
00:00:14,320 --> 00:00:16,129
an order list of your choice,

7
00:00:16,129 --> 00:00:18,373
otherwise we can go for the unordered list.

8
00:00:19,360 --> 00:00:22,560
Well, if you look at the tasks we have in our paragraphs,

9
00:00:22,560 --> 00:00:25,390
then I think an order list would be the right way to go.

10
00:00:25,390 --> 00:00:27,920
Because first we should repeat what we learned,

11
00:00:27,920 --> 00:00:29,550
then we should do the exercises,

12
00:00:29,550 --> 00:00:30,950
then we should dive deeper,

13
00:00:30,950 --> 00:00:32,533
so we should follow this order.

14
00:00:33,460 --> 00:00:37,070
Therefore, your ordered list is our way to go here.

15
00:00:37,070 --> 00:00:38,250
Step one

16
00:00:38,250 --> 00:00:41,870
and now we need what three list items,

17
00:00:41,870 --> 00:00:42,733
item one,

18
00:00:44,890 --> 00:00:45,723
item two

19
00:00:47,140 --> 00:00:48,843
and item three.

20
00:00:49,770 --> 00:00:51,680
Now we just need to add the content

21
00:00:51,680 --> 00:00:53,880
to these list items and

22
00:00:53,880 --> 00:00:55,783
should be copied the paragraphs to,

23
00:00:56,750 --> 00:00:58,750
at the moment, this is not required.

24
00:00:58,750 --> 00:01:02,510
If the items only contain the challenge, so this plain text

25
00:01:02,510 --> 00:01:06,450
then it's totally fine to just cut out this text and add it

26
00:01:06,450 --> 00:01:09,820
as list item. This is semantically completely correct,

27
00:01:09,820 --> 00:01:11,490
which has to have this list item, now

28
00:01:11,490 --> 00:01:13,780
which contains some text.

29
00:01:13,780 --> 00:01:16,763
Let's do the same thing for the second.

30
00:01:17,660 --> 00:01:20,333
And the third list item here,

31
00:01:22,070 --> 00:01:25,293
this and let's delete our free paragraphs.

32
00:01:26,310 --> 00:01:28,170
Let's quickly save this

33
00:01:29,940 --> 00:01:32,080
and now before our list being completed,

34
00:01:32,080 --> 00:01:34,640
let's go back to the website

35
00:01:34,640 --> 00:01:35,930
and you see these three

36
00:01:35,930 --> 00:01:38,743
challenges displayed as list items.

37
00:01:39,720 --> 00:01:40,973
So task solved.

38
00:01:41,890 --> 00:01:45,120
Let's now continue with styling our list.

39
00:01:45,120 --> 00:01:47,850
And the first thing I want to tackle are

40
00:01:47,850 --> 00:01:48,930
these numbers here.

41
00:01:48,930 --> 00:01:50,120
So just one, two, three

42
00:01:50,120 --> 00:01:52,740
indicating that we have an order list.

43
00:01:52,740 --> 00:01:56,750
We know that this order list is more a semantic topic.

44
00:01:56,750 --> 00:01:58,630
Therefore, I don't think this looks good.

45
00:01:58,630 --> 00:02:00,920
So let's get rid of these.

46
00:02:00,920 --> 00:02:04,120
For that if we look at our coding here,

47
00:02:04,120 --> 00:02:08,009
we could say that each of these single list items

48
00:02:08,009 --> 00:02:10,173
should have these numbers removed.

49
00:02:11,320 --> 00:02:15,490
So let's go to our full-week, CSS file here,

50
00:02:15,490 --> 00:02:18,160
select the list items.

51
00:02:18,160 --> 00:02:20,640
And now say that in our list,

52
00:02:20,640 --> 00:02:23,660
the list style property,

53
00:02:23,660 --> 00:02:26,320
which defines what the list should look like

54
00:02:26,320 --> 00:02:28,193
should be set to none.

55
00:02:29,430 --> 00:02:31,710
If we save this, we see that

56
00:02:31,710 --> 00:02:34,103
the numbers here disappeared.

57
00:02:35,400 --> 00:02:37,220
And by the way, if we go back,

58
00:02:37,220 --> 00:02:41,740
you also have other options for your list style here.

59
00:02:41,740 --> 00:02:44,020
You could, for example, set it to square.

60
00:02:44,020 --> 00:02:46,170
Just to give you one example.

61
00:02:46,170 --> 00:02:48,990
If you do that, you have these squared bullet points here.

62
00:02:48,990 --> 00:02:51,490
So you can tackle this as you prefer,

63
00:02:51,490 --> 00:02:54,223
but I want to stick to none at this stage.

64
00:02:55,260 --> 00:02:56,900
However, I'm not totally happy

65
00:02:56,900 --> 00:02:59,150
with the way we applied this property now

66
00:02:59,150 --> 00:03:02,220
because if we go back to our website

67
00:03:02,220 --> 00:03:06,413
and to today's challenge, now inspect this page.

68
00:03:07,330 --> 00:03:09,770
You might remember from the last module,

69
00:03:09,770 --> 00:03:12,610
when we talked about this paragraph

70
00:03:12,610 --> 00:03:15,153
and specifically inside this paragraph,

71
00:03:16,120 --> 00:03:17,970
this anchor tag here,

72
00:03:17,970 --> 00:03:19,190
by the way, as you see,

73
00:03:19,190 --> 00:03:21,450
we have some code injected here by

74
00:03:21,450 --> 00:03:23,210
our life server extension now

75
00:03:23,210 --> 00:03:25,460
it's this script element here.

76
00:03:25,460 --> 00:03:26,900
You can ignore this for the moment.

77
00:03:26,900 --> 00:03:29,520
We'll explore this later in a bit more detail

78
00:03:29,520 --> 00:03:32,123
in the JavaScript part of this course.

79
00:03:33,270 --> 00:03:35,750
However, coming back to this anchor tag,

80
00:03:35,750 --> 00:03:37,880
you might remember that we talked about

81
00:03:37,880 --> 00:03:41,850
specific rules, which get applied to this element.

82
00:03:41,850 --> 00:03:44,763
Although we didn't specifically select this element.

83
00:03:45,610 --> 00:03:49,480
An example was this paragraph here, this one.

84
00:03:49,480 --> 00:03:51,870
So the paragraph where this

85
00:03:51,870 --> 00:03:53,630
anchor tag sits inside.

86
00:03:53,630 --> 00:03:56,050
So if you would un-select the

87
00:03:56,050 --> 00:03:58,780
specific font family applied to

88
00:03:58,780 --> 00:04:00,930
this anchor tag here,

89
00:04:00,930 --> 00:04:03,130
you see that now this rule here.

90
00:04:03,130 --> 00:04:05,370
So the font family would be applied

91
00:04:05,370 --> 00:04:07,010
to this anchor tag,

92
00:04:07,010 --> 00:04:08,670
not the best example here, of course,

93
00:04:08,670 --> 00:04:10,470
as it is the same font family.

94
00:04:10,470 --> 00:04:12,380
But now you see that this is strike through.

95
00:04:12,380 --> 00:04:13,700
If I select this again,

96
00:04:13,700 --> 00:04:15,920
you see that this is strike through.

97
00:04:15,920 --> 00:04:18,899
So it doesn't get applied from this element.

98
00:04:18,899 --> 00:04:21,010
It sits inside from this paragraph,

99
00:04:21,010 --> 00:04:22,680
but it gets directly applied

100
00:04:22,680 --> 00:04:24,460
because of the rule we made

101
00:04:24,460 --> 00:04:26,443
specifically for this element.

102
00:04:27,690 --> 00:04:30,670
I mentioning this because if we explore our full week,

103
00:04:30,670 --> 00:04:33,620
once again and now check our

104
00:04:33,620 --> 00:04:36,200
ordered list and the list items.

105
00:04:36,200 --> 00:04:39,470
Well, we basically have the same structure, right?

106
00:04:39,470 --> 00:04:41,210
We have list or lists,

107
00:04:41,210 --> 00:04:42,820
which would be equivalent to the

108
00:04:42,820 --> 00:04:45,130
paragraph of the other page.

109
00:04:45,130 --> 00:04:47,950
And inside this list, we have our list items,

110
00:04:47,950 --> 00:04:49,320
which could be the anchor text.

111
00:04:49,320 --> 00:04:50,153
So to say

112
00:04:51,330 --> 00:04:52,700
at the moment we applied

113
00:04:52,700 --> 00:04:54,190
the list style property

114
00:04:54,190 --> 00:04:56,763
to each of the list items.

115
00:04:57,910 --> 00:04:59,810
But what if we changed this

116
00:04:59,810 --> 00:05:02,320
and now not apply this list style

117
00:05:02,320 --> 00:05:06,500
none property to our single list items,

118
00:05:06,500 --> 00:05:11,500
but one level up, maybe to our ordered list.

119
00:05:11,610 --> 00:05:15,250
So again, here list style, none.

120
00:05:15,250 --> 00:05:16,520
Let's save this

121
00:05:16,520 --> 00:05:19,410
and let's now comment out this part.

122
00:05:19,410 --> 00:05:21,640
So commenting out means that we want to

123
00:05:21,640 --> 00:05:24,040
keep the code in here for later reference,

124
00:05:24,040 --> 00:05:26,700
but that the code is not applied

125
00:05:26,700 --> 00:05:29,160
to our website at the moment.

126
00:05:29,160 --> 00:05:30,710
And to comment out of things,

127
00:05:30,710 --> 00:05:35,333
you can simply go up here to code preferences,

128
00:05:36,230 --> 00:05:38,050
keyboard shortcuts,

129
00:05:38,050 --> 00:05:41,500
and now you can simply search for comment.

130
00:05:41,500 --> 00:05:42,970
And here this

131
00:05:43,810 --> 00:05:44,840
toggle line

132
00:05:44,840 --> 00:05:45,810
common shortcut

133
00:05:45,810 --> 00:05:47,530
is the one you typically use.

134
00:05:47,530 --> 00:05:49,510
So this is the key binding I'm currently using.

135
00:05:49,510 --> 00:05:51,160
You can edit the key bind in here

136
00:05:51,160 --> 00:05:53,440
by clicking on to this pencil.

137
00:05:53,440 --> 00:05:55,590
But this is the default one I have in here.

138
00:05:56,970 --> 00:06:00,130
So with this shortcut, I can also select this,

139
00:06:00,130 --> 00:06:02,510
use the shortcut and comment this out.

140
00:06:02,510 --> 00:06:05,093
You see that's the syntax to comment things out.

141
00:06:05,093 --> 00:06:08,560
So it's this slash anti-asterisk and then asterisk slash.

142
00:06:08,560 --> 00:06:10,793
So if we save this, we go back,

143
00:06:11,650 --> 00:06:14,460
you see that our numbering is still gone.

144
00:06:14,460 --> 00:06:16,013
And if we inspect this,

145
00:06:16,960 --> 00:06:18,440
you see that the ordered list, now

146
00:06:18,440 --> 00:06:21,310
has this list style none rule applied

147
00:06:22,270 --> 00:06:24,690
and our list items,

148
00:06:24,690 --> 00:06:26,770
also have this it says it is

149
00:06:26,770 --> 00:06:29,030
inherited from OL thing here,

150
00:06:29,030 --> 00:06:33,280
but we basically kind of receive this from this element.

151
00:06:33,280 --> 00:06:35,983
Our list elements are nested inside.

152
00:06:38,200 --> 00:06:42,630
Now what happens if I comment this back in

153
00:06:42,630 --> 00:06:45,850
and change just to square as we just did it

154
00:06:45,850 --> 00:06:46,910
and save this

155
00:06:48,130 --> 00:06:49,880
well then the squares are back.

156
00:06:49,880 --> 00:06:52,850
So then this rule of our order list

157
00:06:52,850 --> 00:06:55,993
list style none is not applied somehow.

158
00:06:57,070 --> 00:06:59,920
And what if I take this list style non thing

159
00:06:59,920 --> 00:07:02,010
and add it as a second rule.

160
00:07:02,010 --> 00:07:04,100
So we have the same property twice,

161
00:07:04,100 --> 00:07:07,093
but with different values, what wins then?

162
00:07:08,010 --> 00:07:10,030
Well, let's check this.

163
00:07:10,030 --> 00:07:12,010
Well then list style none wins.

164
00:07:12,010 --> 00:07:14,050
You see down here in our dev tools,

165
00:07:14,050 --> 00:07:17,563
the list style square rule is striked-through,

166
00:07:18,590 --> 00:07:21,010
but the list style none wins,

167
00:07:21,010 --> 00:07:23,340
and the style from the ordered list

168
00:07:23,340 --> 00:07:24,573
also doesn't win.

169
00:07:25,880 --> 00:07:27,390
So what is going on here?

170
00:07:27,390 --> 00:07:30,070
Why are certain rules applied?

171
00:07:30,070 --> 00:07:32,130
Why are some rules applied,

172
00:07:32,130 --> 00:07:35,400
which we use on a higher level elements.

173
00:07:35,400 --> 00:07:37,720
So to say, and why is here

174
00:07:37,720 --> 00:07:39,210
the second rule winning and

175
00:07:39,210 --> 00:07:40,333
not the first one.

176
00:07:41,730 --> 00:07:44,320
These are all questions which require us to dive

177
00:07:44,320 --> 00:07:46,610
a bit deeper into CSS.

178
00:07:46,610 --> 00:07:50,440
And the first step now is that we will investigate the

179
00:07:50,440 --> 00:07:54,220
relationship between our list,

180
00:07:54,220 --> 00:07:55,610
empty ordered list,

181
00:07:55,610 --> 00:07:58,973
and the body element in a bit more detail.