Build Your First: HTML & CSS

Loading the player…


Styling the banner content area:

So, now we need to get some bit of spacing here and style this text to be much larger. So, down below, we’re going to work under banner-content. And our first elector is going to be banner-content. So, we have padding and we have text-align: center. But the question is what do all these mean? Well, all these come from the design. In each case, I would measure them in pixels and then convert them to an em-based measurement. And the first one is actually 30. The next one is. So there we have it 30 on 16, 24 on 16, and 45 on 16. So 30 at the top 24 at the left and right, and 45 on the bottom. Next up, we’re going to style the banner-content heading. So we have a bit of margin, mainly the bottom. We’ve got some color, making it white. Font size 1.5 and font weight normal. Well let’s look at the calculation for what this means. So, 1.5 is equivalent to. So we’re setting the font size to basically around 24px. At least in small screen. And then if we look up here. That actually means that this is going to be on 24. So, it’s equivalent of 30 px on 24, or 1.875. Let’s go down, and we’re going to set up our wide screen versions.

Creating banner content styles for wide screens:

And we can copy these rules from above. Paste them in below. And adjust them a bit. Now, we can get rid of text-line center, and we just need. Now, that will be the equivalent of that’s the equivalent of 135 on 18, and 36 on 18. And if we go down below, we just need to change the font size. We’re going to go up a fair way. And this is equivalent of on 18, 46px. Let’s go and have a look in our browser. So here we have it. You can see that there’s now a nice bit of padding above and below. Our heading has become white and much larger. And let’s see what happens as we drag the window in. At a certain point, the text becomes much smaller. And you’ll see also that the banner image is changing from our large image to our small image. So there’s our banner finished.