In this video.
Let's go ahead and then style the header.
Well, before we continue.
Guys, I make some mistake here.
Let's fix it and then we continue.
First I made some typing mistake, supposed to be content.
And then for this day we are going to wrap all this element inside.
So let's cut the paragraph and then the link and then place it inside the header content because I want
to control the entire children using the header element.
So back to the CSS.
First is let's go ahead and then reset the browser defaults.
So here we go, asterisk and then margin is zero, padding the zero.
And then the border box or box sizing is also border box.
And you can see that there is no margin or padding around the elements.
So before you continue, let's add some global style to every element.
So I'm going to add it to the entire body and I'm going to give font family to the entire body using
what is called Roboto.
So I'm going to be as Roboto.
And then if there is no font of that sort, then it should fall to sans serif.
And let's add font size of 1.4 ram.
And lastly, let's give it a background color of hashtag.
F five, f five, f five.
And then that is it.
So let's save it.
And now have a look.
And this is what we have as compared to the final one.
We are on our way.
The next step is let's select the header.
So here we go.
So I will give it a comment.
Says Header.
And for here, I'm going to use this play called Flex.
So next step is let's give it Display Flex because I want to control the children in it.
And with that, let's give it a height of a v h that's V port height, and let's give it a background
color for the meantime and let's see what we are styling.
Indeed, this is what we are styling.
The next step is, instead of this background, I use an image, so I'm going to make use of background.
And then you are to locate where the image is for a slash images and I use the header image jpeg.
So if I do that, this is what we have.
But you can see that the image is not that visible.
So we are going to use some images properly, for example, position to be center.
So going to be as background position at the center.
If I do that now, you can see everything is coming to life, but I want the image to be more visible
inside a container.
So I'm going to use background size called cover.
It's going to be background size.
So let's make use of cover and this what we have.
But I want to position these elements at the start here.
If I put it here, it's not all that visible because of the color of the flower and then the text.
So here to achieve that we are going to make use of justified content to be center and then the align
items to be flex starts.
So with this one, let's see.
And now this is what we have achieved.
But I want this one to be at the center.
So I'm going to select the header which is this one and use text align to be center.
So here we go, dot header content and text align center.
And to give a part around it as ten P6, save it.
And this is what we have as compared to the final one.
So let's style the H one and it is under header content.
Each one.
I want to target this one.
So I'm going to be as I can copy this one and down here I'll paste it and I want to tag it.
The H one.
So for this H one, let's give it a font size of five ram font size of five ram and then padding to
be ten pixels and then margin top, let's give it as 20 pixels and then the color of it.
I use hashtag 14213 dx so save it.
And now this watch we have as compared to the final one, we are almost there.
So next step is less tile the button here.
That is the h with remember it's a link, but we can style it to have something like this.
So we are going to target the class of header and then a link here.
So here we go.
I can copy this one and down here I'll paste eight and change this one to the link.
That is a link.
So let's see how we are going to style it.
So let's remove everything from here and let's start with the background colour to be hashtag hashtag
three point FS and next s, let's give it a colour as hashtag three, three, three and next is let's
give it a border of one paste solid three, three, three.
And the next one is let's give it a padding as $15 and then $20 and font size of 1.2 ram and then font
weights.
Let's put it as bold and cursor.
Are as point to save it.
And let's have a look.
And this what we have.
So let's remove the text declaration.
So here we go.
I'm going to be as text declaration to none.
And now save it.
And this what we have.
So let's go ahead and add some spacing between the paragraph and then the link.
So our target, the header contents and then the paragraph that is the P.
So I our select this one and then paste it here and remove everything from here and select the P tab.
And I want to give it a margin of ten parsecs.
So let's see now I think I can increase it to let's say 20 and now this one looks good.
So let's try on mobile and see if it's okay.
Yes, I think this book as compared to the final one.
So let's reduce the number of texts here to let's say something like this.
Yeah, I think it's good.
This is a final one and this is what we are building.
So the next step is let's go ahead and then implement this number in the next video.