All right welcome back.
So this is the section where we're going to style the header section so I'm going to show you real quick
follow we're going to be working with.
So you can see here that we have linked to normalize that CSX and main that CSX.
So we're going to build out the globalize that CSX which is going to be the header section and we'll
show you what we're going to do here in a second.
So let's copy the start.
Custom CSX.
And I'm going to return twice and paste that down here and we're going to do start Global CSX.
OK.
And then what we're gonna do is global that CSX and then I'm going to right click on the CSX folder
here to new file and we're gonna call this global that CSX guy.
Now what I want you to do is right click and open in the browser just so you can see what we're gonna
be building here.
So you can see we have a header section here with links.
So what we're gonna do is we're going to style the header.
We're going to style the logo that you can't see because it's in white.
We're going to style the navigation and the anchor with a hover state.
OK.
So let's go to our global that's ISIS and the first thing I want you to do is we're going to give the
body a font family of Roberto
and then and then return and we're gonna do header and we're going to do with 100 percent height is
gonna be 80 pixels and background is gonna be hashtag 1 7 2 0 3 5 K we're going to save that right click
and open in the browser for me so you can see what we built there.
OK.
So now you can see that we gave the header a width of 100 a height of 80 pixels and a background kinda
color of navy blue.
Similar to Navy ball.
I'd say it's navy blue.
Now what I want to do is I want to position the logo and then we're going to position the links here.
OK.
So let's go to global.
Yes us and right below us we're going to do image I.D. logo and we're gonna do margin left one hundred
pixels margin right.
One hundred pixels position is gonna be absolute top is gonna be 17 pixels and the left is gonna be
zero and I'm going to show you what we did there.
So let's go to the index that HDMI file.
So we basically said this right here this this element image element with the idea of Logo.
I wanted to have a margin of hundred pixels margin right of one hundred pixels a position of absolute
top seventeen pixels from the top and then zero from the left.
So when I right click on open in the browser the image should be lined up where we want it.
OK.
So we've positioned the header and also the logo to be where we wanted to be.
Now what we need to do is do the same thing for the navigation.
So let's close that out.
We're going to go to global Nazi SS and what we're gonna do here is we're gonna do NAV and we'll do
display inline block.
We're gonna do margin left 400 pixels margin right is gonna be 30 pixels.
OK so now when I open in the browser from the index that h to Mel page OK we move the we've moved the
navigation over and we did display inline block.
So now it's in line.
Now what we have to do is give it give it the position that we wanted to have.
So what we're gonna do now is we're going to give the anchor a bunch of properties.
So we're gonna do color white and then we're gonna do text decoration and we're gonna do font weight
to Ms.
We'll do font family
rubato then we'll do margin right.
Twenty pixels OK.
And then we're going to do pad in 30 pixels.
OK.
Now let's save that as I zoom in.
Right click open in the browser now you can see I have them spread out
so that looks good.
OK.
Now what I want to do is one more thing I want to give them a hover state.
So we're going to do color white background is going to be hashtag 0 9 5 6 8.
The case is going to be like a light blue and then we're going to pad in 30 pixels.
Now when I right click on open in the browser
we're gonna have a hover state OK.
So let me check one thing here
I'm noticing that one thing is off.
This right here.
So I typed in the wrong property.
I told you the wrong thing.
So instead of margin right we wanted to margin top because I noticed that when I looked at the browser
I'm not going to open this I'll just.
Well it's already open.
All right let me right click and open in the browser so you can sort I'm saying now it's correct because
I changed it but before this link was up here and I wanted it to be here.
OK.
So that's all we have for the header section.
I'll see you in the next video where we're going to style the image section.
I'll see you there.
Thanks for watching.