Styling Web Page Elements with CSS
- [Melissa] So I want to start, we're going to invoke our box model right now. I want to get that container to be 80%. Well, the container is just a div. I want to have lots of divs on my website, so I'm definitely not going to create a new piece of CSS that is div, right? So I'm going to go back to Main, so we can see just our plain stuff. Actually, just real quick, so you guys can see what's going on in here. So there is the link. Look, it's right in this document. There is the link to the reset, and you can see he's named every little piece of HTML known to man. Margin, zero. Padding, zero. Border, zero. Font size, 100%. Right, so he's just zeroing everything out. Okay? So that's what's happening in there. So back in Main, we have our basic stuff, I need another piece of CSS to style the div that's going to be our container. I am not going to style a div because we're going to have a bunch of divs, so I'm going to create... I'm only going to have one container. I'm not going to have...
more than one container. So I have a choice, I can create an ID or I can create a class. I'm only going to have one. I'm going to go for ID. Doesn't have to be ID, but that's a good choice. So we're going to go ahead and go... We're in Main, yes we are, okay. I'm going to do New Selector, I'm going to call it "#container." All right, I'm going to move that guy to the top. I am really anal about keeping the CSS in order. Okay? And the reason I am is because it's going to save you time in the end. I've got so many students that come back to me six months later and they're like, "Oh my God, I have to give this out tomorrow and I can't figure out what I'm doing. You need to help me." And I'm like, "Okay, okay, calm down." And I'll get online with them and I'm like, "Stop." And I need 30 minutes to organize their CSS and I can fix it like that. But that's the first thing I... I'm like, "Oh my God, what have you done?" There's CSS everywhere. So keep it in order. And the way I keep it in order is I go in order of my HTML. My container's the first thing. It wraps around everybody else and I keep it at the top of the page, then my nav, then my header, then my aside, then my footer. And we'll talk more about this as we keep going. Again, your order is actually important when it comes to certain things because of the cascade, okay? All right, so I have container. I'm going to go into my Properties and I'm going to turn off Show Set. I'm going to go to my margins. I want it to be 80%, so actually, I need to start with width. My width is going to be 80%, so I'm going to choose percent, I'm going to type in 80, I'm going to hit Return or Enter. It's now 80%. Well, what does that even mean? We need to set the margins. Well, I don't know how wide your browser's going to be, so I'm going to let the CSS figure it out. So my left margin, I'm going to set to auto, and I am going to set my right margin to auto. All right. And it wrote it, so you can see I'm in here. So width 80%, margin left, auto, margin right, auto. Google Chrome, yes. Yes. No, maybe. It doesn't jump to it anymore. It used to jump to it. Nope. Oh, you bugger. All right. Let's see. Okay. That's okay. We're going to do it this way. We're going to save, everything's linked. I'm going to go out to my Finder and I'm going to bring Chrome up. And in my Finder, I'm going to go here. I'll drag and drop. Oh, it's still not working. Oh, I know why. You guys know why it's not working? Because I didn't apply the CSS to anything. - [Crowd] Oh. - Oh, that would help, huh? I just created it. What did I say? CSS can't exist by itself, it needs some HTML, right? So I have to hang it on the div tag. I totally forgot to do that. All right, let's go into the source code. So, I need my div tag. All right, good time to introduce the DOM. I know you guys don't love code and you're not going to want to go hunting in the source code all the time, so we have this thing called the DOM. It is the Document Object Model, that's what it stands for. So I have this little DOM panel, so you can see it's got HTML, head, body. I am looking for, actually, stuff in my body, not in my head, and I want that guy. So I can choose that guy right there, right? And I can also choose that guy. I'm going to go into Live View. I can use my arrow keys, right? I'm on my aside. There's a bunch of different ways to pick it. Okay? And this is important because you're going to be picking stuff all the time, so you want to be comfortable picking stuff out of your file. So you can use the DOM, right? I can click directly on the div here. I can also come down here in the Tag Selection Bar, okay? So I've got body, div, aside. I want the div. I can click on the div here and I'll have it. And I can also mess around inside of here. So now that I'm on the aside, if I hit my up arrow, now I'm in header, now I'm in nav, now I'm in Div. So I can use my arrow keys, too. Okay? So my arrows keys are going right up here, they're going right back on the Tag Selection Bar and they're going back, back, back, or in, in, in, inside of my HTML, okay? So lots of different ways to pick your HTML. So now that I have my div, I'm in Live View to do this, and look, I have a handy little plus sign. Do you see? It says "div," and a little plus, right? So I click on the plus, it says "Class / ID," I start typing in "#". Took it long enough. But it's like, "Oh, you want that one?" Yes, please. Thank you. Down arrow, hit Return, it adds it. It's 80%, look at that. Because I actually applied it to something. Okay, so we go File, Save, I saved all. Let's try that again. Dreamweaver's not working. We'll just hit Enter, and now it's 80%. Now, it's 80% no matter what. Okay? I don't want it no matter what. I'm actually going to put some limits on it. Okay? So let's put some limits on it. I have those limits in here somewhere. I should. That's all right. I know what they are. I don't know where they are. Okay, I want to go back into CSS Designer, back into main, back into container, and I'm going to say, "Minimum width, don't get any smaller than 350 pixels," which is the size of my phone, "And don't go any wider than 1,200 pixels." Okay? Now, save again. I need to do File, Save All because, see, I saved and it didn't save my CSS, right? So File, Save All, come back into my browser. No. That was funny. No, I don't need to translate, thanks. So it won't go wider. This screen is really small, you guys, so I don't know. Yeah it's not going to show. This screen is really small because of the way the video goes. So it's not going to show us but it is. It's constrained, trust me. I promise, okay? So that's pretty easy, right? Hey, we just created some pretty cool CSS. That was easy-peasy, right? And look, it's all in there. So we've got our container in there, we've got our background colors in there. This is easy.