Transcript from the "Styling Div Tags" Lesson
[00:00:00]
>> Jen Kramer: All right, so let's just go ahead and get started here and start looking at some of these properties. So let's make a style for the div, okay? So is this going to affect box one, box two, or both boxes? Both boxes, right? Okay, so let's start with the border property which you learned yesterday and I'm gonna put in a five pixel blue solid border, okay?
[00:00:30]
So you can see here that we have two boxes, right? There's one paragraph in one box, and two paragraphs in the other box. So far so good? Border is always the easy one to start with, because it's really obvious where the border is, okay? So now that we know that, what if I wanted to put some space in between box one and box two.
[00:00:55]
So right now their two borders intersect, you will notice that it looks like there is a fat blue line between those two paragraph one and two, that's where div one is ending and div two is starting, you have five pixels of the bottom border, plus five pixels of the top border together, right?
[00:01:11]
So you've got ten pixels of blue line there. What if I want some space in between those, what property do I need to make that space?
>> Speaker 2: Margin.
>> Jen Kramer: Margin, correct, margin. So let's talk about how we can put margin into our document. Which direction do I want this margin to go?
[00:01:33]
Do I want it on top? Do I want it on bottom, yes?
>> Speaker 2: Bottom.
>> Jen Kramer: On the bottom, okay, we could put it on the bottom and it's going to go on the bottom of both of these boxes and that should separate it, right? Where's another place we could put the margin?
[00:01:48]
>> Speaker 2: Top, or top and bottom.
>> Jen Kramer: Or you can put it on the top, right? If we put it on the top what's going to happen?
>> Speaker 3: The page will move down a little bit but it also have.
>> Jen Kramer: Everything will move down a little bit but we'll also get some space in between our boxes, right?
[00:02:03]
Which is right? Which is correct?
>> Speaker 3: It depends.
>> Jen Kramer: It depends.
>> [LAUGH]
>> Jen Kramer: Yeah, what do you wanna do stylistically speaking? So let's try both of these. Margin top and let's say something like one rim, okay? So see how nicely we just separated those two boxes and we've pushed everything down just a little bit, okay?
[00:02:28]
And let's try the reverse to because we could also do margin bottom right
>> Jen Kramer: So if we do margin bottom, we still have these boxes separated, but now we have more space on the bottom. And that is a design decision about which one you wanna do. So there are a lot of margin properties.
[00:02:50]
Let's scroll on down to margin here.
>> Jen Kramer: Okay, so here in the web page, you'll see that there is a margin-top, a margin-right, a margin-bottom, and a margin-left. Those are all things. And the other interesting thing about margin is that margin values may be positive or they may be negative.
[00:03:15]
>> Jen Kramer: Cool, who knew you could have a negative margin, okay? So let's try out some negative margin. What would happen if I said my margin bottom was negative one rem anybody want to take a guess what's gonna happen? Yeah?
>> Speaker 2: They intersect.
>> Jen Kramer: They were on top of each other at zero, right?
[00:03:37]
We had the two borders, what's going to happen if we do negative?
>> Speaker 3: Overlapping.
>> Jen Kramer: They're going to overlap, right? They're actually going to overlap. So if we do a negative,
>> Jen Kramer: That might actually be hard to see what's going on there. How can I fix this so it'd be easier to tell what's happening.
[00:03:54]
Anyone have a suggestion? Yeah?
>> Speaker 3: Up to the amount of rim.
>> Jen Kramer: We could give it more rim, sure. We could give it, let's give it two rim instead, minus two. Getting worse and worse. We love our ugly web pages. What else could we do?
>> Speaker 2: Change the border colors like border top?
[00:04:12]
>> Jen Kramer: Yeah, let's try giving each of these classes we have a class for box one and a class for box two. Let's give these different colors. Okay? So here's something that we can do that will take advantage of the cascade. All right, where we can also change these colors.
[00:04:28]
So I'll show you two ways of doing this. One way of doing this, we could just say box one, our class, and we could say what, border is five pixel orange dotted.
>> Jen Kramer: Okay, so that's one way of doing this. There we go. You can now see that those two borders are a bit more separated.
[00:04:51]
Now tell me about what's happening here with box one. We actually have two border declarations for box one don't we, right? We have the generic div, five pixels blue solid. And then later with our class we actually said make it instead orange and dotted, didn't we. So that's kinda cool.
[00:05:13]
We're taking advantage of the cascade there. Yeah?
>> Speaker 3: I'm just wondering if I know it sounds it's lower, it's gonna run it. Is the class technically more specific too?
>> Jen Kramer: And the class is technically more specific as well, yep, yep. Okay, so this is one way of doing this.
[00:05:29]
Here's another way that we could do this. In your border properties here on the page, way up there on the top,
>> Jen Kramer: Borders properties. So far we've used the actual border just by itself that puts a border on all four sides, right? Like one pixel solid red, but we actually have a whole bunch of individual properties that go with border as well.
[00:05:56]
We can talk about just the border width, just the border style, just the border color and we can also talk about borders and space, the border on the top. The border on the top has a width. The border on the top has a style, make sense? Yes?
>> Speaker 2: And this is all just a list of examples.
[00:06:13]
It's not all of them or is this all of them?
>> Jen Kramer: Well, you have to repeat that list out from border top to border, top color for the bottom, the left and the right. Yes, we got tired of typing. This is a lot of properties [LAUGH] okay. So we can make use of these border properties as well.
[00:06:34]
So instead here on box one of saying this whole border once again, we could just say something like this. Border is, or I'm sorry, border color is orange.
>> Jen Kramer: See how that's working with the cascade here?
>> Jen Kramer: So in the div we said it was a five pixel blue solid border.
[00:07:00]
But now in box one we're overriding it by changing the color to orange. But the five pixel in the solid part are still in effect. Yeah?
>> Speaker 2: Can we do a background color and see which one is really overlapping with the other.
>> Jen Kramer: Sure, that will be great.
[00:07:15]
Let's go ahead and do that. Let's put in a background color.
>> Speaker 2: Like it was like they're both, like that.
>> Jen Kramer: F, F, F, F.
>> [INAUDIBLE]
>> Speaker 3: On the edges, you can see the-
>> Speaker 2: Okay, so if you filled in the blue, it would cover up everything in that box, right?
[00:07:36]
You wouldn't see the yellow anymore.
>> Jen Kramer: Well, okay, let's go ahead and put in, for that blue box, then. Let's say that our background-color is light blue.
>> Jen Kramer: So this is a really interesting thing that we just did here. What's going on? What's going on? Anyone would care to discuss what's going on here.
[00:08:01]
Box one is the orange box, box two is the blue box.
>> Jen Kramer: Okay? Why does it look this way now? What just happened?
>> Speaker 3: Box two is lower down the HTML.
>> Jen Kramer: So box one we have box two box two lower in the HTML.
>> Speaker 3: And therefore it Is showing up over box one?
[00:08:30]
>> Jen Kramer: We've moved that one up with negative margin, and it's now on top of box one, isn't it?
>> Speaker 3: Yeah, so the HTML wins over the CSS, when it comes to the cascade, is that-
>> Jen Kramer: Well, no, there's just an order for these. One will show up on top of the other.
[00:08:48]
And so the thing to remember about your boxes is though, while your boxes look like they're in 2D space, right? They're actually in 3D space. So we could actually go into and out of the page as well. And there's a property for that as well. It's called the z index.
[00:09:06]
Okay, so we could change the order of these boxes if we wanted to going up and down. I'm not gonna go there today. So we go back to positive numbers. There's our two boxes.