Now, let's start with the image size, actually.
For this, we can target this image.
We can do this with the image type selector,
but we also might want to just target images in the header,
because whilst on this page, we won't have any other images.
It is of course,
pretty realistic that on many pages you're going to build,
you have more than one image on the entire page,
and you might want to
style the image in the header in a certain way,
but that's not necessarily the style
you then want to apply to all the other images
on the page as well.
And therefore, to only target image elements in the header,
we can use a CSS Combinator in our CSS rule.
Instead of targeting an image like this,
we can target only images inside of a header element
by using this CSS Combinator,
which says target images that are inside of a header.
And with that,
we're now targeting just this one image inside of a header.
And now if I want to restrict the size of that image,
I can, for example, give it a width of, let's say,
300 pixels.
And if I do that,
it is now smaller.
And you see that the aspect ratio is kept by default.
So we don't need to set the height manually.
Instead with the width,
the height also shrinks automatically,
because the browser by default keeps the aspect ratio.
Which is, of course, very, very useful.
We don't have to
manually calculate what our height value has to be.
And with that, now the image is a bit smaller.
Now,
I want to add some spacing around all that header content,
just so that later, once we got content below it,
we have more space available,
and a bit more space around the header.
And therefore,
I now want to dive into the box model again,
and that was a
key concept you learned about in the last core sections.
You might recall that the box model
is about those different layers of spacing
and of styling around your content.
And you can see the box model
if you inspect an element in the Def Tools.
And then if you scroll down here in Chrome
in that elements tab in the styles tab,
then you see the box model, displayed here.
The blue part in the middle is your content,
and you also see the size of your content here
width and height,
the green part around it here,
that's the padding, if any, then the border, if any,
and then the margin, if you set any.
And here we got some default margin set by the browser.
Now I wanna change the spacing for my header element
and there we currently got no margin,
no border and no padding.
And to change this, I'll go back here to my header,
and I then want to add some spacing around my content,
and we could do this with margin,
but I will do it with padding here,
and set this to 32 pixels to add some inside spacing.
Now, we have no border around our header,
and therefore, technically,
there shouldn't really be
a large difference between inside and outside spacing
and which of the two we use,
but there will be a slight difference, actually,
if I use margin, instead of padding,
you see the spacing is actually not applied like this.
And the reason for that is that the browser by default
sees that the H1 element already got some margin.
And if the wrapping,
the parent element,
around this H1 element then also has some margin.
Then those margins are not added up by default.
If you want to add it up,
you need to set a padding on the parent element,
and then that padding will be added automatically
to the margin inside of your parent element,
so inside of the header here,
and that's why I'm using a padding on the header,
that sets some inside spacing on the header,
and we still get the outside spacing
around the child element, this H1 element.
And now the two are added up.
As you can see on the left side,
the orange part here around H1 is the margin,
the blue part for the header is including that margin,
and then we got that spacing,
that green part added around that inside content.
And that's how we can now set
some spacing around our content here,
and make sure that the header has enough room to breathe,
so to say.
And that's it for the header styles now.
Next let's work on the
content and styling of our main section,
so the main content of our page.