Build Your First: HTML & CSS

Loading the player…


Transcript

Planning and creating HTML elements for press area:

Good day and welcome to lesson eight. In this lesson, we’re styling the press and the footer modules. If we look at the finished layout and scroll right down near the bottom, we’ll come to the recent press area. In here, we’re going to focus on the press container or the press module. We’re look, going to look at the press heading. And then these are considered the press logos. And inside there we also have solvable, nc, Waratah and Bevel. And they’re all the classes we need to focus on. Once again, we’re going to open our finished folder. Open up our index file and we’re going to copy our press information. And then we can open up our start folder and go down to press and paste it in here. And again, it’s just to save us a lot of typing. So the actual overall things are the same, but we’ve now added in a heading with press heading. And we’ve add in some logos in here. So our four little logos are going to go inside. So that’s going to style the press area.

Styling press area:

And you see under our comment for press, we’re going to add a range of rules here. And the first one is .press { text-align }.Center. The next thing I’mgoing to do is the heading. So reset to 1em. Now, in a second we’re going to come back and find out what the next is actually going to be. We’re setting the color to fff, or white. And the font size to one point. So one second as you do. Well it’s actually 25 px on 16 px. So you’re going to back up here 25 px. It’s actually going to be 25 px on 25 px. Cause it’s actually just 1em. Press logos. 2em. And. In one particular case we want to set the logos to a margin bottom of 0. Now we’re going to set our white again.

Creating press styles for wide screens:

And we’re going to copy and paste in our heading and logos. Indent them. And we want to set a font size. In this case it’s going to be, which is equivalent of 34. Come on 18. And then we want a font-weight of normal. Now for our press logos, we’ve got a bit of work here because we want them to sit beside each other. So what we want to do here is set them to float left. And then we want margin 0. So what we’re doing here is we’re setting it to float left and the right edges, the right sides of them have a little bit of margin. Now, we’re setting it to a percentage because these are sitting inside liquid containers. So you’ll see I used ems a lot when I’m setting padding and margins, etc. But when you’re actually setting things inside a liquid container, sometimes it’s better to use percentages instead. And now we need to style the four different logos. So they’re all called press logos. And they’ve all got dashes. The first one is solvable, the next one is nc, the next one is waratah, and the last one is bevel. Now in each case we want to set a width. And all I did here was look at the pixel measurement provided by the design and just converted that into a percent. And the second one is going to be 8.65%. The next one’s going to be 32.78%. And the last one’s going to 18.84%. Now, on this one, we also need to give it margin zero. Let’s go and have a look in a browser. Reload. And go down to the bottom. And there we have our four logos sitting beside each other. And then below each other.