Build Your First: HTML & CSS

Loading the player…


Planning the contents and styles for banner module:

Good day and welcome to lesson five. This lesson’s all about styling the banner module. If we look at out finished layout, you can see that the banner module takes up a large area of the main screen. We’re going to be working in three different components of this banner module. The first is the overall banner module itself. And then we’re going to work in the header area, which includes the logo and the nav. And then we’re going to work in the banner content area. And if we look at the first component, the banner itself, you can see that we have a large and a small version of the image. So our first task is to style the banner and to make sure that we can swap out the image. So let’s get into it.

Creating HTML elements for banner image area:

Now we’re going to work in the banner area. Because there’s a lot of HTML in that little area. And we want to focus on the styling of it, rather than type all that markup in, we’re going to open up the finished folder and look in the index file. And underneath our banner, we’re going to grab the header and the section. We’re going to copy that from the finished file and we’re going to paste it into our style file. So we can get rid of that word banner. And then from here down, header and section we can paste in that information. And let’s have a quick run through when we’re done here. The first thing is, this was already here. But we’ve added a role of banner. That’s our area landmark role. Here inside we have div, with a class of header logo. And that is the pointing off to an asset, which is our logo correlate. Then we have a nav element, with a class of header_nav, and that has a role of navigation. And inside that we have two list items, header_nav-about, and contact. It’s also got a class of current, because this one will be fake selected. In our section, we now have an h1, which has got our main text on the page in the big banner. And then we have an a element that’s looking off to our little icon, the Apple store icon. And that’s the mock up for the banner area. Now, let’s go and style it.

Styling the banner image area:

Open the Start folder, assets, css. And it’s working marginal dot CSS. We’re going to start under the banner comment. The first thing we need to do is set up the selector. And now we need to set up the background, including color, image, repeat, position, and background size. So here we have our selector, row–banner, we have background-color and then we have background-image, URL and then we’re looking for path of ../going up one, to img/banner-small, and then no-repeat, centered, and cover. Background size is a great property to use, and the value of cover is fantastic. It allows us to cover the whole element with this background image. The next thing we need to do is to change this background image when itgoes to wide screen, and we can do that using a media query. So this is min-width 38em, and this will take effect when the view port is a minimum of 38em or upwards. Now we need to write our selector, and we can copy and paste this one, push it in here. And we really only need background image. And we need to change from banner-small just to banner. And now what will happen is at small screen, we get banner-small. And at widescreen, or above 38em, the banner will change to the large image. And now we’re ready to go and style the header.