1
00:00:02,180 --> 00:00:04,240
So let's now add some styling

2
00:00:04,240 --> 00:00:06,350
to our main content

3
00:00:06,350 --> 00:00:09,220
and to the different elements in there.

4
00:00:09,220 --> 00:00:12,000
And I'll start with the main element itself

5
00:00:12,000 --> 00:00:14,810
because this overall main content

6
00:00:14,810 --> 00:00:18,000
should sit in a little box with rounded corners,

7
00:00:18,000 --> 00:00:19,630
with a nice background color,

8
00:00:19,630 --> 00:00:22,000
which is centered on the screen.

9
00:00:22,000 --> 00:00:24,390
And therefore in my CSS code,

10
00:00:24,390 --> 00:00:27,800
I want to target the main element here

11
00:00:28,910 --> 00:00:32,000
and then actually do a couple of things to it,

12
00:00:32,000 --> 00:00:36,837
for example, give it a background color of RGB,

13
00:00:37,690 --> 00:00:41,880
and then I'll use 122, 74, 218,

14
00:00:41,880 --> 00:00:43,890
and that's just the color I picked here,

15
00:00:43,890 --> 00:00:45,963
of course you can use a different one.

16
00:00:46,960 --> 00:00:49,900
If I saved as we have this background color,

17
00:00:49,900 --> 00:00:53,200
but like this, it doesn't look that good,

18
00:00:53,200 --> 00:00:57,330
instead, the width should be restricted,

19
00:00:57,330 --> 00:00:59,980
the element then should be centered,

20
00:00:59,980 --> 00:01:02,620
the corners should be rounded,

21
00:01:02,620 --> 00:01:06,650
and I always want to have some internal spacing in that box

22
00:01:06,650 --> 00:01:09,073
between the border and the content.

23
00:01:10,820 --> 00:01:12,730
Now for that internal spacing,

24
00:01:12,730 --> 00:01:16,420
we learned that we can use padding to set that.

25
00:01:16,420 --> 00:01:19,150
And here I'll set this to 32 pixels,

26
00:01:19,150 --> 00:01:22,903
though of course you can experiment with different values.

27
00:01:23,890 --> 00:01:25,550
I also want to restrict the width

28
00:01:25,550 --> 00:01:29,060
which I can do with the width CSS property

29
00:01:29,060 --> 00:01:32,420
that sets the width of an element.

30
00:01:32,420 --> 00:01:35,123
And here I'll set this to 700 pixels.

31
00:01:36,120 --> 00:01:38,640
If I do that, we see that internal spacing

32
00:01:38,640 --> 00:01:41,000
and we see that the width is restricted,

33
00:01:41,000 --> 00:01:42,870
but it's not centered.

34
00:01:42,870 --> 00:01:47,040
Now here we can't center this with text align center

35
00:01:47,040 --> 00:01:48,990
because the main element,

36
00:01:48,990 --> 00:01:51,200
which is the element which I want to center

37
00:01:51,200 --> 00:01:54,290
is not a inline element.

38
00:01:54,290 --> 00:01:58,240
So if we would add text align center

39
00:01:58,240 --> 00:02:00,650
here on this main element,

40
00:02:00,650 --> 00:02:05,330
then we would center the text or the inline content

41
00:02:05,330 --> 00:02:08,620
as you learned inside of that main element,

42
00:02:08,620 --> 00:02:10,650
but that's not what I want to do.

43
00:02:10,650 --> 00:02:14,600
Here I don't want to center the text inside of main,

44
00:02:14,600 --> 00:02:18,170
I instead want to position that main element as a whole

45
00:02:18,170 --> 00:02:19,970
centered on the screen.

46
00:02:19,970 --> 00:02:23,330
The content in main should be left aligned,

47
00:02:23,330 --> 00:02:26,270
it should not be centered.

48
00:02:26,270 --> 00:02:29,360
So therefore we need to center main overall,

49
00:02:29,360 --> 00:02:31,880
and since main is not a inline,

50
00:02:31,880 --> 00:02:33,500
but a block element,

51
00:02:33,500 --> 00:02:35,900
we can't go to a higher level,

52
00:02:35,900 --> 00:02:39,640
to body and add text align center there

53
00:02:39,640 --> 00:02:42,270
to center body's content,

54
00:02:42,270 --> 00:02:44,710
so to main element inside of body,

55
00:02:44,710 --> 00:02:46,680
because texts align as you learned

56
00:02:46,680 --> 00:02:51,490
only affects inline elements and main is no such element.

57
00:02:51,490 --> 00:02:53,410
That's why we need a different way

58
00:02:53,410 --> 00:02:55,913
of centering this element as a whole.

59
00:02:56,870 --> 00:03:00,340
So to center that non-inline element,

60
00:03:00,340 --> 00:03:02,220
we can use a little trick.

61
00:03:02,220 --> 00:03:06,750
We can set a margin which controls the outside spacing.

62
00:03:06,750 --> 00:03:10,460
And here we can set 32 pixels

63
00:03:10,460 --> 00:03:13,730
as a top and bottom margin

64
00:03:13,730 --> 00:03:18,200
and then set auto as a left and right margin.

65
00:03:18,200 --> 00:03:23,200
This year is a slightly alternative margin syntax

66
00:03:23,410 --> 00:03:26,120
where I don't just set one value,

67
00:03:26,120 --> 00:03:29,020
but I set one value for top and bottom

68
00:03:29,020 --> 00:03:31,660
and one value for left and right margin,

69
00:03:31,660 --> 00:03:35,190
that's one of to support that margin syntaxes.

70
00:03:35,190 --> 00:03:38,892
As similar syntax exists for padding,

71
00:03:38,892 --> 00:03:43,080
there're also are other alternative margin syntaxes,

72
00:03:43,080 --> 00:03:44,000
you can, for example,

73
00:03:44,000 --> 00:03:46,610
target every single direction

74
00:03:46,610 --> 00:03:48,690
and set its own margin value,

75
00:03:48,690 --> 00:03:50,870
but very often you have just one value

76
00:03:50,870 --> 00:03:54,500
for all directions or one value for the vertical

77
00:03:54,500 --> 00:03:57,990
and one value for the horizontal margin.

78
00:03:57,990 --> 00:03:59,990
And auto is a special value,

79
00:03:59,990 --> 00:04:04,870
which when used on the horizontal axis

80
00:04:04,870 --> 00:04:09,040
will actually center the element on which you apply it,

81
00:04:09,040 --> 00:04:11,890
if it is a block element,

82
00:04:11,890 --> 00:04:13,470
and therefore I'm using it here

83
00:04:13,470 --> 00:04:16,990
on this block element on the horizontal axis

84
00:04:16,990 --> 00:04:18,470
to center this element.

85
00:04:18,470 --> 00:04:21,043
If I save this now, it is centered.

86
00:04:22,480 --> 00:04:25,220
Now to give this box rounded corners,

87
00:04:25,220 --> 00:04:29,380
we can set the border radius property

88
00:04:29,380 --> 00:04:33,550
and set that to let's say, eight pixels

89
00:04:33,550 --> 00:04:37,160
to round off those corners slightly.

90
00:04:37,160 --> 00:04:40,583
If we do that, we see those rounded corners.

91
00:04:42,240 --> 00:04:46,210
Now black on purple alls is a bit hard to read

92
00:04:46,210 --> 00:04:48,990
and therefore as a lost value here,

93
00:04:48,990 --> 00:04:52,480
or as a lost property here on the main element,

94
00:04:52,480 --> 00:04:55,350
I also want to target the text color

95
00:04:55,350 --> 00:04:58,160
with the color CSS property.

96
00:04:58,160 --> 00:05:02,833
And here I'll set that color to rgb,

97
00:05:04,530 --> 00:05:09,027
and then maybe, 248, 241, 255,

98
00:05:13,080 --> 00:05:16,220
but of course you can also set your own color here.

99
00:05:16,220 --> 00:05:17,540
Now color,

100
00:05:17,540 --> 00:05:21,180
unlike background color will be inherited

101
00:05:21,180 --> 00:05:24,457
by child elements and by descendants.

102
00:05:24,457 --> 00:05:27,060
And therefore, if I set the color on main,

103
00:05:27,060 --> 00:05:30,670
all the HTML elements inside of main

104
00:05:30,670 --> 00:05:34,450
will inherit that color and use that color,

105
00:05:34,450 --> 00:05:37,720
and hence we see that color applied.

106
00:05:37,720 --> 00:05:40,260
The only exception is the link,

107
00:05:40,260 --> 00:05:43,610
and the reason for that simply is that this link here,

108
00:05:43,610 --> 00:05:46,500
if we inspect it, this anchor element

109
00:05:46,500 --> 00:05:49,170
has a browser default style,

110
00:05:49,170 --> 00:05:51,200
even though that looks very cryptic,

111
00:05:51,200 --> 00:05:54,460
this webKit link color, which is applied,

112
00:05:54,460 --> 00:05:56,780
that's just some browser built in color,

113
00:05:56,780 --> 00:05:57,920
you could say.

114
00:05:57,920 --> 00:06:02,130
But that is a color which is applied as a browser default,

115
00:06:02,130 --> 00:06:05,850
but that turns out to have higher specificity

116
00:06:05,850 --> 00:06:08,560
than the inherited color.

117
00:06:08,560 --> 00:06:10,410
That's why this inherited color

118
00:06:10,410 --> 00:06:13,660
has the strike through effect here,

119
00:06:13,660 --> 00:06:15,680
meaning that it's not applied

120
00:06:15,680 --> 00:06:17,440
because this default color

121
00:06:17,440 --> 00:06:19,610
has the higher specificity

122
00:06:19,610 --> 00:06:22,910
and overwrites the inherited color.

123
00:06:22,910 --> 00:06:24,340
And therefore for the link,

124
00:06:24,340 --> 00:06:27,150
we'll have to set our own color again

125
00:06:27,150 --> 00:06:30,200
with yet a higher specificity

126
00:06:30,200 --> 00:06:33,620
and anything will be higher than the default styles

127
00:06:33,620 --> 00:06:35,110
except for inheritance,

128
00:06:35,110 --> 00:06:38,370
which is actually lower as you see here.

129
00:06:38,370 --> 00:06:41,120
But we'll come back to the link in a couple of minutes,

130
00:06:41,960 --> 00:06:45,360
for the moment this indeed looks okay,

131
00:06:45,360 --> 00:06:47,210
we got that white color.

132
00:06:47,210 --> 00:06:51,940
Now I want to work on the list styling

133
00:06:51,940 --> 00:06:54,263
before I then also style the links.