1
00:00:02,120 --> 00:00:05,560
Let's now work on the style of our full week page.

2
00:00:05,560 --> 00:00:07,490
And we could start from top,

3
00:00:07,490 --> 00:00:10,149
so, with our H1 element up here,

4
00:00:10,149 --> 00:00:15,080
then with the anchor tag and afterwards with our order list.

5
00:00:15,080 --> 00:00:19,550
For this, I'll first comment out the list items here,

6
00:00:19,550 --> 00:00:22,010
we'll keep the list then on rule for the order list.

7
00:00:22,010 --> 00:00:23,870
Because as explained earlier,

8
00:00:23,870 --> 00:00:26,040
this rule will be inherited to the children.

9
00:00:26,040 --> 00:00:29,710
So, the list items, therefore, this is all right.

10
00:00:29,710 --> 00:00:33,050
So, let's get started with our H1 element.

11
00:00:33,050 --> 00:00:37,040
So, the headline in the full week HTML file,

12
00:00:37,040 --> 00:00:38,820
we have a font family already.

13
00:00:38,820 --> 00:00:43,010
This is defined in our shared CSS file.

14
00:00:43,010 --> 00:00:46,230
So, we could get started with changing the font size of it.

15
00:00:46,230 --> 00:00:49,190
I think this current default font size is not perfect.

16
00:00:49,190 --> 00:00:50,643
We could make this maybe,

17
00:00:52,930 --> 00:00:54,180
a bit bigger here.

18
00:00:54,180 --> 00:00:57,603
So let's go for a font size of 48 pixels.

19
00:00:58,670 --> 00:00:59,890
Let's see.

20
00:00:59,890 --> 00:01:02,360
Yeah, now it looks better already.

21
00:01:02,360 --> 00:01:04,069
And besides our font size,

22
00:01:04,069 --> 00:01:05,239
I would like to have a

23
00:01:05,239 --> 00:01:07,610
slightly different color at the moment.

24
00:01:07,610 --> 00:01:10,450
We have the same color that we find in the body.

25
00:01:10,450 --> 00:01:12,260
So we inherited this

26
00:01:12,260 --> 00:01:16,150
and I prepared a slightly different grayish tone here,

27
00:01:16,150 --> 00:01:18,420
just to bring a bit more life into this page.

28
00:01:18,420 --> 00:01:20,970
And this is 71,

29
00:01:20,970 --> 00:01:22,840
62,

30
00:01:22,840 --> 00:01:24,133
and 62.

31
00:01:25,210 --> 00:01:27,440
And yeah, with that,

32
00:01:27,440 --> 00:01:31,060
we have changed the color slightly and increase the size.

33
00:01:31,060 --> 00:01:34,170
So I think our H1 element looks all right,

34
00:01:34,170 --> 00:01:36,500
let's now continue with the next element

35
00:01:36,500 --> 00:01:37,840
here in our project.

36
00:01:37,840 --> 00:01:40,570
And this would be our anchor tag.

37
00:01:40,570 --> 00:01:42,040
As for the H1 element,

38
00:01:42,040 --> 00:01:43,490
we have defined some styles already

39
00:01:43,490 --> 00:01:46,102
here in our shared CSS file.

40
00:01:46,102 --> 00:01:47,680
So, font, family,

41
00:01:47,680 --> 00:01:50,100
and text decoration is nothing we have to define.

42
00:01:50,100 --> 00:01:51,690
We might think about the color

43
00:01:51,690 --> 00:01:54,510
and some other properties, though.

44
00:01:54,510 --> 00:01:58,030
Let's get started with adding some background color.

45
00:01:58,030 --> 00:02:00,210
We added some background color to the body here,

46
00:02:00,210 --> 00:02:01,730
but for the anchor tag,

47
00:02:01,730 --> 00:02:03,372
I want to have a different background color

48
00:02:03,372 --> 00:02:04,890
to give this more,

49
00:02:04,890 --> 00:02:07,080
this wall pattern-like, look.

50
00:02:07,080 --> 00:02:08,110
As background color,

51
00:02:08,110 --> 00:02:10,139
we choose the background color property,

52
00:02:10,139 --> 00:02:13,770
and then I prepared another color already, again, RGB.

53
00:02:13,770 --> 00:02:16,403
And here, this is 167,

54
00:02:17,520 --> 00:02:18,380
1,

55
00:02:18,380 --> 00:02:19,540
and 78.

56
00:02:19,540 --> 00:02:22,010
This is kind of a reddish tone.

57
00:02:22,010 --> 00:02:24,220
So to say, you might remember this color

58
00:02:24,220 --> 00:02:27,664
from the shell CSS file as the actual color

59
00:02:27,664 --> 00:02:30,760
for the text in this anchor tag.

60
00:02:30,760 --> 00:02:33,740
Therefore at the moment, we cannot see a lot.

61
00:02:33,740 --> 00:02:37,950
So we should change the color property here to white.

62
00:02:37,950 --> 00:02:39,820
Maybe here, I don't use RGB,

63
00:02:39,820 --> 00:02:42,573
but just the white predefined color here.

64
00:02:43,490 --> 00:02:44,750
Yeah, it looks better.

65
00:02:44,750 --> 00:02:47,623
Some issues still, but it's improved already.

66
00:02:48,920 --> 00:02:49,980
What we could then add,

67
00:02:49,980 --> 00:02:52,883
as we also did it already in our shell CSS file,

68
00:02:53,810 --> 00:02:55,860
is some border radius

69
00:02:55,860 --> 00:03:00,730
of four pixels to get these slightly rounded corners.

70
00:03:00,730 --> 00:03:02,030
I think this looks better.

71
00:03:02,950 --> 00:03:07,640
Besides that, we could also work on the font size of it.

72
00:03:07,640 --> 00:03:11,010
Let's maybe give it 24 pixels.

73
00:03:11,010 --> 00:03:11,843
Yeah.

74
00:03:11,843 --> 00:03:13,843
Now this looks a bit more prominent, so to say.

75
00:03:14,800 --> 00:03:15,700
What doesn't look good though,

76
00:03:15,700 --> 00:03:16,910
is if we hover here,

77
00:03:16,910 --> 00:03:18,910
we still get this text decoration.

78
00:03:18,910 --> 00:03:22,970
So we define texts decoration non for the default case.

79
00:03:22,970 --> 00:03:24,863
But once we hover it's back here,

80
00:03:25,980 --> 00:03:27,190
I'm not a big fan of that.

81
00:03:27,190 --> 00:03:30,750
So let's also add the hover pseudo selector

82
00:03:30,750 --> 00:03:33,460
for our anchor tag here,

83
00:03:33,460 --> 00:03:34,920
and there.

84
00:03:34,920 --> 00:03:39,650
We'll say text decoration should be set to none.

85
00:03:39,650 --> 00:03:41,860
So this should look better.

86
00:03:41,860 --> 00:03:43,710
Yeah. Now we don't have this effect,

87
00:03:43,710 --> 00:03:46,520
but now the problem is that we don't get any feedback

88
00:03:46,520 --> 00:03:48,920
once we hover here besides the change in cursor.

89
00:03:49,870 --> 00:03:54,750
So what we could also do is we could add a background color

90
00:03:55,908 --> 00:03:58,400
for the hover case.

91
00:03:58,400 --> 00:04:00,250
And here, well, big surprise.

92
00:04:00,250 --> 00:04:02,130
I prepared another color.

93
00:04:02,130 --> 00:04:05,143
This has the RGB code of 180,

94
00:04:08,010 --> 00:04:09,370
12,

95
00:04:09,370 --> 00:04:11,063
and 90.

96
00:04:12,050 --> 00:04:14,900
So with that, if we hover here, yeah, you see,

97
00:04:14,900 --> 00:04:16,800
it's just a slight feedback here,

98
00:04:16,800 --> 00:04:18,512
but looks a lot better already.

99
00:04:19,730 --> 00:04:22,330
With this, I'm happy with our H1 element

100
00:04:22,330 --> 00:04:24,710
and the anchor tag not finished yet.

101
00:04:24,710 --> 00:04:26,370
Of course, this looks a bit tight here,

102
00:04:26,370 --> 00:04:29,450
for example, we'll cover this in a few minutes,

103
00:04:29,450 --> 00:04:34,450
but we can now continue actually with our list here.

104
00:04:34,450 --> 00:04:36,420
I'll skip the order list for the moment now

105
00:04:36,420 --> 00:04:40,520
and directly tackle the specific list items.

106
00:04:40,520 --> 00:04:42,140
We can, of course delete our,

107
00:04:42,140 --> 00:04:44,980
the style here not needed at this stage.

108
00:04:44,980 --> 00:04:48,420
For the list items I would like to get started

109
00:04:48,420 --> 00:04:51,310
with some background color, again,

110
00:04:51,310 --> 00:04:54,180
big fan of colors to make things look a bit more beautiful.

111
00:04:54,180 --> 00:04:55,020
And again,

112
00:04:55,020 --> 00:04:59,503
the color I prepared here has the RGB code of 223,

113
00:05:01,910 --> 00:05:03,890
136,

114
00:05:03,890 --> 00:05:04,723
and,

115
00:05:06,590 --> 00:05:07,423
124.

116
00:05:09,350 --> 00:05:12,510
Then another property we know already is maybe

117
00:05:12,510 --> 00:05:14,480
some border radius to give it this front,

118
00:05:14,480 --> 00:05:17,283
look here, maybe with six pixels.

119
00:05:18,980 --> 00:05:20,592
And yeah, if we go back,

120
00:05:20,592 --> 00:05:24,820
we see that we now have some color in here.

121
00:05:24,820 --> 00:05:27,420
You see that we have these rounded corners.

122
00:05:27,420 --> 00:05:31,020
We don't have any space between our list items here,

123
00:05:31,020 --> 00:05:34,869
but we can quickly add some space with the margin property

124
00:05:34,869 --> 00:05:37,573
that we used already here in our head.

125
00:05:38,900 --> 00:05:41,640
This adds the space between our elements.

126
00:05:41,640 --> 00:05:46,640
So let's maybe use a margin here of 32 pixels, for example,

127
00:05:48,270 --> 00:05:49,930
let's see if this looks better. Yeah.

128
00:05:49,930 --> 00:05:53,090
Now we have these three elements separated a bit.

129
00:05:53,090 --> 00:05:55,660
Still, this page doesn't look to be fancy.

130
00:05:55,660 --> 00:05:56,900
If you're honest,

131
00:05:56,900 --> 00:05:59,720
we have some issues here when it comes to the space,

132
00:05:59,720 --> 00:06:01,580
this text needs in this box.

133
00:06:01,580 --> 00:06:03,010
So we need some additional space in here.

134
00:06:03,010 --> 00:06:06,290
Actually, the width of these items is awkward.

135
00:06:06,290 --> 00:06:08,450
The space between these is also strange.

136
00:06:08,450 --> 00:06:10,980
So yeah, we are not there yet.

137
00:06:10,980 --> 00:06:12,160
To dive deeper here,

138
00:06:12,160 --> 00:06:16,420
we need to understand another core concept of CSS, though.

139
00:06:16,420 --> 00:06:18,803
The so-called CSS box model.