4.5 Box styling - Video Tutorials & Practice Problems

<v Instructor>So far, we've seen some style changes</v> that have relatively small impact on the appearance of the page. In this section, we're going to add just a few rules, but change the appearance dramatically. So, we're gonna focus on this section here. We're gonna make this look a lot nicer. This section, the main book report. So, let's find the div that's surround that whole report. This is one of the great things about divs is you can use them to style things. Where is it here, it's this div here. So, this div will have style. (keyboard clacking) And we'll give it a fixed width. (keyboard clacking continues) Let's build this up one by one and we'll just refresh it every time. So, we've fixed the width now. You can see now it's a fixed width of 500 pixels. We're going to put a margin, top and bottom. Here and at the bottom of 20 pixels. (keyboard clacking) And then we'll center it. And the way to center this div is the same way that we centered this image. Remember this is a the block. So, we can do margin: 20 pixels, top and bottom. Margin auto, right and left. So, that's this. (keyboard clacking) Like that. And then we'll put some padding around the whole box. (keyboard clacking) It's very similar to margin, but we'll see the difference. Actually, I'll show you the difference in a sec. So, this is 30 pixels of padding. See that? By the way, you might have noticed, there's an extra space here. The style rule doesn't care. You can put in lots of spaces. (keyboard clacking) And the final thing we wanna do is put in a background color, and that's background-color. (keyboard clacking) And this is the kinda thing you might use a color picker for. We're going to use a gray. (keyboard clacking) That's fafafa. Let's take a look at the effect of that. There we go, we've got a nice, subtle gray. If you wanna be 100% sure it's doing the right thing, you can do something like, say purple. (keyboard clacking) All right, that's very dramatic. That's the kind of thing that I would do if I wanna make sure that something is working. I'd say, "Fine, let's just change the background color to purple, I don't know why it's not working." And then if it doesn't turn purple, then I know that there's something wrong with the rules. But in this case, we've got a nice, subtle gray. Let's do one final comparison. Let's get rid of this whole style rule. (keyboard clacking) We go from this, with just one, two, three, four rules, to this. It's a lot nicer. I promised to show you the difference between padding and margin. Let's look at this here. Here is the padding. Where is it? (keyboard clacking) Let's change this to margin. So, look at this spacing here. Oh, so this is actually, what happen here is this margin overroad this one here. We can do 30 pixels. (keyboard clacking) Like this. It's still centered. So, you can see what happens here, actually, let's change this back to purple, just to make sure you can really see it. (keyboard clacking) So, what happens here is with the margin, there's just as much separation between one part of the box here and this image, but the color doesn't extend to it. So, the difference between margin and padding, in this context, is that the padding (keyboard clacking) gets the same color as the background. So, we can do (keyboard clacking) like that. And the padding works the same way as margin. You can do, say 100 pixels 0 0 50, (keyboard clacking) and it looks like that. So, it has the same basic behavior as the margins, but it lets you pick up a background color. (keyboard clacking) Great.