1
00:00:02,080 --> 00:00:05,400
Now, let's start with the image size, actually.

2
00:00:05,400 --> 00:00:07,939
For this, we can target this image.

3
00:00:07,939 --> 00:00:11,483
We can do this with the image type selector,

4
00:00:12,530 --> 00:00:17,530
but we also might want to just target images in the header,

5
00:00:17,880 --> 00:00:22,280
because whilst on this page, we won't have any other images.

6
00:00:22,280 --> 00:00:23,113
It is of course,

7
00:00:23,113 --> 00:00:26,800
pretty realistic that on many pages you're going to build,

8
00:00:26,800 --> 00:00:30,400
you have more than one image on the entire page,

9
00:00:30,400 --> 00:00:31,590
and you might want to

10
00:00:31,590 --> 00:00:33,960
style the image in the header in a certain way,

11
00:00:33,960 --> 00:00:36,680
but that's not necessarily the style

12
00:00:36,680 --> 00:00:39,120
you then want to apply to all the other images

13
00:00:39,120 --> 00:00:41,230
on the page as well.

14
00:00:41,230 --> 00:00:45,080
And therefore, to only target image elements in the header,

15
00:00:45,080 --> 00:00:50,080
we can use a CSS Combinator in our CSS rule.

16
00:00:50,290 --> 00:00:52,700
Instead of targeting an image like this,

17
00:00:52,700 --> 00:00:56,660
we can target only images inside of a header element

18
00:00:56,660 --> 00:01:00,340
by using this CSS Combinator,

19
00:01:00,340 --> 00:01:04,613
which says target images that are inside of a header.

20
00:01:05,459 --> 00:01:06,293
And with that,

21
00:01:06,293 --> 00:01:09,490
we're now targeting just this one image inside of a header.

22
00:01:09,490 --> 00:01:12,360
And now if I want to restrict the size of that image,

23
00:01:12,360 --> 00:01:15,100
I can, for example, give it a width of, let's say,

24
00:01:15,100 --> 00:01:17,140
300 pixels.

25
00:01:17,140 --> 00:01:18,610
And if I do that,

26
00:01:18,610 --> 00:01:20,323
it is now smaller.

27
00:01:21,320 --> 00:01:25,530
And you see that the aspect ratio is kept by default.

28
00:01:25,530 --> 00:01:28,630
So we don't need to set the height manually.

29
00:01:28,630 --> 00:01:30,380
Instead with the width,

30
00:01:30,380 --> 00:01:32,980
the height also shrinks automatically,

31
00:01:32,980 --> 00:01:36,870
because the browser by default keeps the aspect ratio.

32
00:01:36,870 --> 00:01:39,310
Which is, of course, very, very useful.

33
00:01:39,310 --> 00:01:40,143
We don't have to

34
00:01:40,143 --> 00:01:44,143
manually calculate what our height value has to be.

35
00:01:45,130 --> 00:01:48,410
And with that, now the image is a bit smaller.

36
00:01:48,410 --> 00:01:49,243
Now,

37
00:01:49,243 --> 00:01:52,420
I want to add some spacing around all that header content,

38
00:01:52,420 --> 00:01:55,900
just so that later, once we got content below it,

39
00:01:55,900 --> 00:01:58,150
we have more space available,

40
00:01:58,150 --> 00:02:00,520
and a bit more space around the header.

41
00:02:00,520 --> 00:02:01,610
And therefore,

42
00:02:01,610 --> 00:02:04,890
I now want to dive into the box model again,

43
00:02:04,890 --> 00:02:05,723
and that was a

44
00:02:05,723 --> 00:02:09,530
key concept you learned about in the last core sections.

45
00:02:09,530 --> 00:02:11,620
You might recall that the box model

46
00:02:11,620 --> 00:02:15,900
is about those different layers of spacing

47
00:02:15,900 --> 00:02:20,390
and of styling around your content.

48
00:02:20,390 --> 00:02:21,800
And you can see the box model

49
00:02:21,800 --> 00:02:25,220
if you inspect an element in the Def Tools.

50
00:02:25,220 --> 00:02:27,620
And then if you scroll down here in Chrome

51
00:02:27,620 --> 00:02:30,140
in that elements tab in the styles tab,

52
00:02:30,140 --> 00:02:33,533
then you see the box model, displayed here.

53
00:02:34,380 --> 00:02:37,550
The blue part in the middle is your content,

54
00:02:37,550 --> 00:02:40,030
and you also see the size of your content here

55
00:02:40,030 --> 00:02:41,900
width and height,

56
00:02:41,900 --> 00:02:44,350
the green part around it here,

57
00:02:44,350 --> 00:02:48,600
that's the padding, if any, then the border, if any,

58
00:02:48,600 --> 00:02:51,610
and then the margin, if you set any.

59
00:02:51,610 --> 00:02:55,633
And here we got some default margin set by the browser.

60
00:02:56,570 --> 00:03:01,570
Now I wanna change the spacing for my header element

61
00:03:01,630 --> 00:03:03,650
and there we currently got no margin,

62
00:03:03,650 --> 00:03:06,030
no border and no padding.

63
00:03:06,030 --> 00:03:09,080
And to change this, I'll go back here to my header,

64
00:03:09,080 --> 00:03:13,340
and I then want to add some spacing around my content,

65
00:03:13,340 --> 00:03:15,400
and we could do this with margin,

66
00:03:15,400 --> 00:03:17,690
but I will do it with padding here,

67
00:03:17,690 --> 00:03:22,690
and set this to 32 pixels to add some inside spacing.

68
00:03:24,520 --> 00:03:27,830
Now, we have no border around our header,

69
00:03:27,830 --> 00:03:29,300
and therefore, technically,

70
00:03:29,300 --> 00:03:30,570
there shouldn't really be

71
00:03:30,570 --> 00:03:34,270
a large difference between inside and outside spacing

72
00:03:34,270 --> 00:03:35,988
and which of the two we use,

73
00:03:35,988 --> 00:03:38,740
but there will be a slight difference, actually,

74
00:03:38,740 --> 00:03:41,520
if I use margin, instead of padding,

75
00:03:41,520 --> 00:03:45,480
you see the spacing is actually not applied like this.

76
00:03:45,480 --> 00:03:48,430
And the reason for that is that the browser by default

77
00:03:48,430 --> 00:03:51,980
sees that the H1 element already got some margin.

78
00:03:51,980 --> 00:03:53,520
And if the wrapping,

79
00:03:53,520 --> 00:03:54,970
the parent element,

80
00:03:54,970 --> 00:03:58,700
around this H1 element then also has some margin.

81
00:03:58,700 --> 00:04:02,810
Then those margins are not added up by default.

82
00:04:02,810 --> 00:04:04,310
If you want to add it up,

83
00:04:04,310 --> 00:04:07,020
you need to set a padding on the parent element,

84
00:04:07,020 --> 00:04:11,220
and then that padding will be added automatically

85
00:04:11,220 --> 00:04:15,860
to the margin inside of your parent element,

86
00:04:15,860 --> 00:04:18,010
so inside of the header here,

87
00:04:18,010 --> 00:04:20,370
and that's why I'm using a padding on the header,

88
00:04:20,370 --> 00:04:24,020
that sets some inside spacing on the header,

89
00:04:24,020 --> 00:04:26,516
and we still get the outside spacing

90
00:04:26,516 --> 00:04:30,120
around the child element, this H1 element.

91
00:04:30,120 --> 00:04:32,420
And now the two are added up.

92
00:04:32,420 --> 00:04:34,460
As you can see on the left side,

93
00:04:34,460 --> 00:04:38,070
the orange part here around H1 is the margin,

94
00:04:38,070 --> 00:04:41,580
the blue part for the header is including that margin,

95
00:04:41,580 --> 00:04:43,210
and then we got that spacing,

96
00:04:43,210 --> 00:04:48,210
that green part added around that inside content.

97
00:04:48,416 --> 00:04:50,790
And that's how we can now set

98
00:04:50,790 --> 00:04:53,840
some spacing around our content here,

99
00:04:53,840 --> 00:04:57,740
and make sure that the header has enough room to breathe,

100
00:04:57,740 --> 00:04:58,703
so to say.

101
00:04:59,730 --> 00:05:03,200
And that's it for the header styles now.

102
00:05:03,200 --> 00:05:04,610
Next let's work on the

103
00:05:04,610 --> 00:05:08,240
content and styling of our main section,

104
00:05:08,240 --> 00:05:10,893
so the main content of our page.