Build Your First: HTML & CSS

Loading the player…


Styling the banner header area:

The next thing we need to work on is the header area. And this is this area at the top of the page within the banner. Now the first thing we need to style is the header itself, and put a bit of padding there. And then we need to style the header logo and the header nav. Now a lot of work is going to go into this nav because we need to have these little element style as well. So, let’s get into it. We’ll scroll down under header and we’ll write our first selector, which is .header. Now what we need for the header is a bit of padding on the top and bottom. So we have padding 1.25em on the top and bottom and 1em on the left and right. But what do those measurements equate to? Well, let’s look at the mask. 20px on 16px. So, basically, we’re taking the default font size of 16px, trying to make it work out at 20px, which equates to 1.25em. And the other one is obviously 16 on 16, 1em. Let’s do the header logo. For the header logo we want it to be set out at the left and we’re going to put a tiny bit of padding at the top. Pretty straight forward, now let’s get into the nav, so we need our selector.

Styling the banner header navigation elements:

Now for this one, we need to set it the other way. We want to push our nav over to the right. So this will be set to float right. Now a small screen, we want to give it a pixel width. Which is a bit different to normal. I generally prefer to use em’s for sizing. But just for this small screen version we need to lock it down to a pixel size. And now we can do a descendants selector and work in the ul. We want to turn off the margins and paddings, get rid of the list style, and also set it to text align right. Next up we want to style the li that sits inside the ul, and we want to set them to display nine block and turn off all margins, so they sit beside each other. And now for the big one. We need to style the a element. First of all, a elements are inline elements. But we want to give them margins and padding. So we need to change it from an inline element to a block level element. Then we need to set margins, padding, tiny bit of border radius, a bit of font sizing, and some other things as well. Let’s get into it. So, display block, margin right, 0.2 em. So padding is set for the tiny bit at the top, a bit more on the left and right and even smaller amount on the bottom. We got a bit of border radius, color to white, background is none at the moment. We’re setting the font-size to 0.8125, the font-weight to bold, and text-decoration to none. Now, let’s look at this calculation here. This is the equivalent of 13px on 16px. Now, for one of these a elements, we need to turn off the margin right. And we can do that by using its own selector, which is header_nav-contact. The next thing we need to style is the a element when it’s current, and we can do that with the class of current. And for this we need a bit of background and some color. Next up we want to style the elements in focus, hover, and active states. Wherever possible I try to use all these different states, because they can aid different people, including keyboard users. So, let’s try them. So there we have header__nav a:focus, a:hover and a:active. So we’re giving them different colors for the different states. So, let’s go and have a quick look in a browser. If we reload on the page, you can see this is our layout. But we’re focusing here on small screen. At the moment, we have our logo and our navigation, and they’re working quite well. Now, it breaks up a bit at widescreen, but we’ll fix that now.

Creating banner header styles for wide screens:

So what we want to do next is our media query for widescreen. As usual, min-width: 38em. And what we can do is grab some of the rules from above, and we’ll just adjust them. We need header, nav, and nav a.Header.Nav. Let’s get header first, put it below .Header__nav. And we need nav a. because we’re going to adjust them for widescreen. Right, let’s go up to header. We need to change this to.2.2222, and this actually equates to 40 on 18. Keep in mind the font size has gone up for widescreen. And this is equivalent of 36 on 18. The header nav, we just want to change this to a width of 12em. And for this one we just need to change the font size. So for this we need 0.8333 which is equivalent of 15 on 18. Let’s go and have a look in our browser. And if we reload, you can see that our nav is working now at widescreen, as well as being working at small screen.