1
00:00:02,040 --> 00:00:04,660
Now let's work on the styling

2
00:00:04,660 --> 00:00:06,990
and for that we can go back to the daily challenge,

3
00:00:06,990 --> 00:00:11,900
CSS file and add a new CSS rule here.

4
00:00:11,900 --> 00:00:12,920
In this case, I'll add

5
00:00:12,920 --> 00:00:15,370
the image type selector,

6
00:00:15,370 --> 00:00:17,760
because I want to style all images on the screen

7
00:00:17,760 --> 00:00:18,900
in the same way.

8
00:00:18,900 --> 00:00:20,950
This might not necessarily be the case,

9
00:00:20,950 --> 00:00:22,630
but here we only have one image.

10
00:00:22,630 --> 00:00:25,350
So it is fine to use this selector.

11
00:00:25,350 --> 00:00:26,314
And then, well,

12
00:00:26,314 --> 00:00:28,935
how we do we want to style this.

13
00:00:28,935 --> 00:00:30,910
I want to make it a bit smaller.

14
00:00:30,910 --> 00:00:32,070
I want to shrink it a bit.

15
00:00:32,070 --> 00:00:35,240
So I want to reduce the width and height.

16
00:00:35,240 --> 00:00:38,410
I also want to actually round it

17
00:00:38,410 --> 00:00:42,790
so that it's a circle instead of a square.

18
00:00:42,790 --> 00:00:45,683
And I also want to center it.

19
00:00:46,730 --> 00:00:50,090
Now, centering will be a bit trickier than you might think.

20
00:00:50,090 --> 00:00:51,590
And therefore I'll start with

21
00:00:51,590 --> 00:00:53,050
giving it a width and a height

22
00:00:53,050 --> 00:00:57,020
and turning it into a circle.

23
00:00:57,020 --> 00:00:58,740
Now for setting the width and the height,

24
00:00:58,740 --> 00:00:59,800
we indeed have the

25
00:00:59,800 --> 00:01:01,600
well, width

26
00:01:01,600 --> 00:01:03,210
and height

27
00:01:03,210 --> 00:01:05,870
CSS properties.

28
00:01:05,870 --> 00:01:07,660
And that sets the width and the height

29
00:01:07,660 --> 00:01:10,400
of an HTML element.

30
00:01:10,400 --> 00:01:12,550
And you can not just set the width and the height

31
00:01:12,550 --> 00:01:13,383
of an image.

32
00:01:13,383 --> 00:01:17,693
You could apply this on pretty much any HTML element.

33
00:01:18,670 --> 00:01:22,490
But here now, we need to provide the values.

34
00:01:22,490 --> 00:01:24,560
And just as for the font size,

35
00:01:24,560 --> 00:01:26,420
here we need a dimension.

36
00:01:26,420 --> 00:01:28,730
We need a size value.

37
00:01:28,730 --> 00:01:32,600
And just as with the font size, we can set this in pixels.

38
00:01:32,600 --> 00:01:35,390
We could give this a width of 200 pixels

39
00:01:35,390 --> 00:01:38,433
and a height of 200 pixels.

40
00:01:41,150 --> 00:01:42,750
And if you do this

41
00:01:42,750 --> 00:01:44,040
and save this,

42
00:01:44,040 --> 00:01:45,930
it's now a bit smaller.

43
00:01:45,930 --> 00:01:47,790
I'm also zoomed-in quite a bit here

44
00:01:47,790 --> 00:01:49,030
to make this more readable.

45
00:01:49,030 --> 00:01:53,000
If I would view this page in a non zoomed-in mode,

46
00:01:53,000 --> 00:01:55,140
it would look like this at the moment.

47
00:01:55,140 --> 00:01:56,860
I'm just zooming-in here so that you

48
00:01:56,860 --> 00:01:59,830
have an easier time reading what's on my screen.

49
00:01:59,830 --> 00:02:01,640
So now we shrunk that image.

50
00:02:01,640 --> 00:02:04,750
How do we turn it into a circle?

51
00:02:04,750 --> 00:02:08,023
For this we can target a new CSS property,

52
00:02:09,247 --> 00:02:11,730
the border-radius

53
00:02:11,730 --> 00:02:13,253
CSS property.

54
00:02:14,090 --> 00:02:17,290
This sets the radius of the, well,

55
00:02:17,290 --> 00:02:19,470
border of an element.

56
00:02:19,470 --> 00:02:22,730
And with that, I'm not talking about a visual border.

57
00:02:22,730 --> 00:02:26,080
We have no black or blue or anything like that

58
00:02:26,080 --> 00:02:27,480
border around the image,

59
00:02:27,480 --> 00:02:30,080
but it of course still has a natural border.

60
00:02:30,080 --> 00:02:32,620
It ends somewhere and that's the border.

61
00:02:32,620 --> 00:02:36,330
So here between red and white, that's the border.

62
00:02:36,330 --> 00:02:39,480
And we can shape this border and around this border

63
00:02:39,480 --> 00:02:42,000
by giving it a border radius.

64
00:02:42,000 --> 00:02:44,430
And here we can now give this a border radius

65
00:02:44,430 --> 00:02:47,340
of let's say 100 pixels.

66
00:02:47,340 --> 00:02:48,920
And if I do that

67
00:02:48,920 --> 00:02:50,370
and I save this,

68
00:02:50,370 --> 00:02:51,203
and reload,

69
00:02:51,203 --> 00:02:52,750
now it's rounded.

70
00:02:52,750 --> 00:02:56,620
Now why 100 pixels and not 50 let's say?

71
00:02:56,620 --> 00:03:00,520
Well, if I use 50, then it's not a perfect circle.

72
00:03:00,520 --> 00:03:03,200
You could, of course also use this look if you prefer it,

73
00:03:03,200 --> 00:03:04,770
but it's not a circle.

74
00:03:04,770 --> 00:03:05,860
But if I use 100,

75
00:03:05,860 --> 00:03:10,380
it's a circle because that's half my width and height.

76
00:03:10,380 --> 00:03:11,880
So for now save this,

77
00:03:11,880 --> 00:03:13,123
I'm back to my circle.

78
00:03:14,680 --> 00:03:16,450
Now the only thing that's missing

79
00:03:16,450 --> 00:03:18,470
is that I want to center this image.

80
00:03:18,470 --> 00:03:22,040
And that will be a bit trickier.

81
00:03:22,040 --> 00:03:25,530
You could think that we maybe use text align again

82
00:03:25,530 --> 00:03:26,798
and set this to center.

83
00:03:26,798 --> 00:03:30,390
But if you add text align center on the image,

84
00:03:30,390 --> 00:03:31,570
and you reload,

85
00:03:31,570 --> 00:03:34,450
you see it's not centered.

86
00:03:34,450 --> 00:03:37,337
Now you might think it's not centered because it's no text,

87
00:03:37,337 --> 00:03:39,850
but that's actually not even the reason

88
00:03:39,850 --> 00:03:42,130
because I can already tell you that the image

89
00:03:42,130 --> 00:03:45,760
will be treated like texts when it comes to this.

90
00:03:45,760 --> 00:03:48,010
So that's not the reason.

91
00:03:48,010 --> 00:03:53,010
Instead, text align actually does not align the element

92
00:03:53,350 --> 00:03:55,000
on which you apply it,

93
00:03:55,000 --> 00:03:58,700
but the content of that element.

94
00:03:58,700 --> 00:04:01,756
So when we added text align center on a paragraph,

95
00:04:01,756 --> 00:04:04,960
it's not the paragraph element that was centered,

96
00:04:04,960 --> 00:04:06,620
but the content of that element.

97
00:04:06,620 --> 00:04:08,450
So the text.

98
00:04:08,450 --> 00:04:10,430
Which is of course what we wanted to center.

99
00:04:10,430 --> 00:04:12,059
So that was fine.

100
00:04:12,059 --> 00:04:14,450
But now in the case of the image,

101
00:04:14,450 --> 00:04:15,880
it's a white element

102
00:04:15,880 --> 00:04:17,800
so there is no content to center,

103
00:04:17,800 --> 00:04:20,813
and the element itself isn't centered.

104
00:04:22,000 --> 00:04:26,430
If we inspect this element in the browser dev tools,

105
00:04:26,430 --> 00:04:28,485
if I hover over image, we see,

106
00:04:28,485 --> 00:04:30,800
highlighted on the left,

107
00:04:30,800 --> 00:04:32,880
the boundaries of this image,

108
00:04:32,880 --> 00:04:33,900
and we see,

109
00:04:33,900 --> 00:04:37,500
this is just a part of the row in which it sits,

110
00:04:37,500 --> 00:04:40,150
but it is not centered here.

111
00:04:40,150 --> 00:04:43,810
And if I temporarily add text align center here,

112
00:04:43,810 --> 00:04:46,570
in the dev tools, we see this has no effect.

113
00:04:46,570 --> 00:04:47,630
As we saw before,

114
00:04:47,630 --> 00:04:50,960
the elements still sits in the top left corner.

115
00:04:50,960 --> 00:04:52,910
And I'll reload to get rid of that

116
00:04:52,910 --> 00:04:54,733
texts align center style here.

117
00:04:55,620 --> 00:04:58,430
So how can we center this then?

118
00:04:58,430 --> 00:04:59,263
Well,

119
00:04:59,263 --> 00:05:00,200
since

120
00:05:00,200 --> 00:05:04,540
text align does not affect the element on which you add it,

121
00:05:04,540 --> 00:05:07,700
but the nested content inside of the element,

122
00:05:07,700 --> 00:05:09,980
one way of centering it,

123
00:05:09,980 --> 00:05:12,290
would be to go to the body element,

124
00:05:12,290 --> 00:05:14,950
target the body element in CSS,

125
00:05:14,950 --> 00:05:16,810
and add text align there.

126
00:05:16,810 --> 00:05:19,610
Because image is content of body.

127
00:05:19,610 --> 00:05:22,513
It's inside of the body tags here.

128
00:05:23,390 --> 00:05:24,520
And that's what I'll do.

129
00:05:24,520 --> 00:05:26,399
We can now also target body

130
00:05:26,399 --> 00:05:30,983
and add text aligned center here on body.

131
00:05:32,520 --> 00:05:34,410
And if we save this and reload,

132
00:05:34,410 --> 00:05:36,172
now it is centered,

133
00:05:36,172 --> 00:05:40,660
because the image is treated as text when it comes to that.

134
00:05:40,660 --> 00:05:43,940
But since it's content of the body,

135
00:05:43,940 --> 00:05:47,240
it is now also affected by text align.

136
00:05:47,240 --> 00:05:49,681
And that's a tricky thing about CSS,

137
00:05:49,681 --> 00:05:52,122
which I hopefully could make clear now,

138
00:05:52,122 --> 00:05:53,800
why it works like this

139
00:05:53,800 --> 00:05:57,430
and how we can work around that limitation,

140
00:05:57,430 --> 00:05:58,444
if you want to call it like this,

141
00:05:58,444 --> 00:06:02,400
by simply targeting a higher level element.

142
00:06:02,400 --> 00:06:04,280
In this case, the parent,

143
00:06:04,280 --> 00:06:05,544
as it's called of image,

144
00:06:05,544 --> 00:06:08,100
the element surrounding image,

145
00:06:08,100 --> 00:06:10,020
which is the body.

146
00:06:10,020 --> 00:06:13,520
Now one little adjustment I quickly want to make here,

147
00:06:13,520 --> 00:06:15,931
is I'll take that body's CSS rule,

148
00:06:15,931 --> 00:06:18,011
remove it at the bottom and actually move it

149
00:06:18,011 --> 00:06:21,840
to the top of this CSS file.

150
00:06:21,840 --> 00:06:23,017
You don't have to do that,

151
00:06:23,017 --> 00:06:25,637
as you saw, it worked the other way as well.

152
00:06:25,637 --> 00:06:29,507
But I like to structure my CSS code such that

153
00:06:29,507 --> 00:06:32,119
it kind of fits my HTML code

154
00:06:32,119 --> 00:06:35,240
and here body is the first element.

155
00:06:35,240 --> 00:06:38,190
So I also want to select it first here.

156
00:06:38,190 --> 00:06:39,150
And for the same reason,

157
00:06:39,150 --> 00:06:40,851
I'll also take my image

158
00:06:40,851 --> 00:06:44,055
and bring that further up here as well.

159
00:06:44,055 --> 00:06:46,481
But you can structure this in different ways.

160
00:06:46,481 --> 00:06:51,140
Here it doesn't really matter which order you use.

161
00:06:51,140 --> 00:06:53,359
I'll keep my ID selector down there

162
00:06:53,359 --> 00:06:57,720
because I also like to group my type selectors first.

163
00:06:57,720 --> 00:07:00,300
And then if I have upper selectors, like the ID selectors,

164
00:07:00,300 --> 00:07:02,930
I put them all after all the type selectors.

165
00:07:02,930 --> 00:07:05,570
But again, that's all just personal preference

166
00:07:05,570 --> 00:07:08,410
and you can use a different way of structuring

167
00:07:08,410 --> 00:07:10,563
your CSS code here as well.

168
00:07:11,960 --> 00:07:13,290
Now, in addition,

169
00:07:13,290 --> 00:07:15,151
I also want to get rid of text align center

170
00:07:15,151 --> 00:07:17,640
on the age one element

171
00:07:17,640 --> 00:07:19,558
and on the paragraph element,

172
00:07:19,558 --> 00:07:22,560
because since we already have it on the body,

173
00:07:22,560 --> 00:07:24,000
we already do a center,

174
00:07:24,000 --> 00:07:26,460
all the content in body,

175
00:07:26,460 --> 00:07:28,250
all the text content in body.

176
00:07:28,250 --> 00:07:31,130
And hence if I reload that's still centered

177
00:07:31,130 --> 00:07:35,990
and we now don't have that duplicate text align code.

178
00:07:35,990 --> 00:07:37,890
It wouldn't hurt if we have it,

179
00:07:37,890 --> 00:07:40,066
but having code that doesn't do anything

180
00:07:40,066 --> 00:07:41,970
is never a great idea.

181
00:07:41,970 --> 00:07:45,703
And that's why I removed it now in h1 and P.