Lessons

Lesson Info

The CSS Designer

- [Melissa] I'm going to place my cursor inside of the nav section. I'm going to jump over here to my CSS Designer, and in my CSS Designer, I've got three sections. I have this Sources section, I have an @Media section, which we'll get to later, and I have my Selectors section. So I need to create a new selector that's going to be a tag and then I need to fill out the properties for that selector. Right now, I have no CSS, right? I've got nothing. So, it says click + Add new CSS source. So I'm going to create a new CSS Source. So I'm going to click on that little guy and it says Create New, Attach Existing, Define in Page. I want to create a new separate CSS file. I'm going to click on Create New. I get a little dialog box, I'm going to call this main.css because it's our main CSS. It's going to link. I need to browse because I need to save it somewhere. I got my handy little site root button in Simple Donuts, but I actually want to be... I want to make this there. I want to be inside ...

of our CSS folder that I created, okay? And then I have to type it in again because it didn't remember what I said, which is okay. main.css, okay? And I'm going to click Save, it's linking. It has the URL. I click OK and now I have main.css. A couple of things happened. I want you to look up here under Index. So I've got the title. I now have two... These are buttons. I have Source Code, and if I click on Main, in my code, it actually shows me my CSS. So I can now access all of the different files that I'm going to have attached to my page, right? So, I want to be in Main. And it doesn't matter if you're looking at it or not, it's still going to update it. But the asterisks are important. The key here is, once I create a separate file, that's attached to this file, I can no longer just do a Save. I now have to do a Save All. So, I go to File... Oh, and look, there's no keyboard shortcut for it. I have to do a Save All, because I'm going to be making changes. The other thing you have to be careful of is your undos, okay? So, yeah, while we're working on one file, we've got unlimited undos, but, all of a sudden, you got two files. You just created a CSS, you just created a HTML, you undo, you're like, "Did I undo what I just did or did I undo something in another document?" So, it gets a little squirrely, okay? But now, all I have to do a Save All every time I want to save, all right? A lot of times, the little world button down here, it says, "Oh, all these files need to be saved," just click Yes and it'll save them all for you, okay? All right, so I've got this main.css, I need to create a new Selector, just to make sure. My cursor is in the nav, I'm going to come down to Selectors, to create a new Selector. I'm going to click on the little plus sign. I'm going to click +. Oh, it didn't help me. Sometimes it'll help you and sometimes it won't. Sometimes it helps you by putting stuff in there. We'll see it happen again later. All I want to do is create nav, N-A-V, and look, it even knew as I was typing it. It was trying to help me, right? It knew it was there. So I'm just going to click Enter, I have nav. Now that I have nav, over here in the Properties, I can come and set some properties up. This panel's a little weird, it takes a little getting used to, okay? So the Show Set is currently selected. What does that mean? So that means that it's showing me the CSS that is currently set, which is nothing, because I haven't set anything yet. So it's not showing me anything, okay? So you're going to use Show Set when you're trying to fix stuff and see what's being set. I'm going to uncheck Show Set. And we have all this stuff. What is happening in here? So I have all these little icons, and if I scroll down, it's like it goes on for days. So it's like, "Here's your CSS on a platter, pick. What do you want to do?" And it's very overwhelming, okay? And it's not even…obvious, this is not everything. Obvious, we can do a lot more with CSS than what's even in here. But this is great for most of the stuff that you going to need. So just so you know, these little icons at the top, the first one is for Layout, okay? And it'll have my layout section at the top. The next one is for Text. So if I click on it, you can see, it jumped down to show me the Text properties. The next one is for Borders. So if I click on Border, it jumps to the Border property. Backgrounds and then etc., if I wanted to type in my own CSS. Okay, so that's kind of how this section works and we're going to keep working with it and keep talking about it. I'm interested in doing a background. I want to make my nav...give it a background color. So I'm going to click on the Background property, and under Background Color, currently, it says Undefined. I'm going to click on this little icon here. What's my background color? It's always sticky. So from my sticky, that blue is #23a4e4. There's my blue. Now, I can save it in here, so I don't have to keep doing that, right? So I can... Oh, I got to click the plus sign. There we go. So I click the plus sign and it now saves my blue. That should be the last time I have to type in that number. And now I have a blue. Look, it's blue. Isn't that cool? Now, I want to do the same thing with the header tag. So I'm going to come... It doesn't matter. It wasn't helping me. Under Selectors... Oh, it did help me this time. Make a liar out of me. See? There you go. Don't work when I want it to, work when I don't care. Okay, body div header. All I care about is the word "header." I don't need "body" and "div." I'm going to delete that. I'm just going to stick with header. I'm going to come back into Properties, to make sure that's there, select my header. Background property, I want this to be purple and my purple color is #8f789d. Click that plus sign. Now, I've got purple. I'm good. Hit Enter or Return, and I got purple. I want my sidebar to be a tan color, so I'm going to go ahead and do New Selector. Don't worry about it, just delete what's in there because it's not what I want. I want Aside. And for my Aside, I would like my background color to be…click on that, tan. It is #f1deb3. Oh, and I forgot to add it, Didn't I? Real quick. Plus. Okay, good. All right, and then my main is going to be white, so I'm just going to leave that alone for now, and my footer is going to be pink. Pink? I can't remember. I think it was pink. Does that sound right, pink? Okay, so I got my Footer, click on it, Background, Color. The color of my Footer is #ed9acc, click on the +, don't forget that, get it in there, and it's pink. Awesome. Okay, let's save. So, I'm going to go to Preview, Chrome, and it should ask me to save. I guess it should, or not. I think it's not working today, is it? That's all right. I'm going to save. CMD+S or Ctrl+S. Yeah, see, it didn't work. That's interesting. That's interesting. That should have worked. I did a CMD+S or CTRL+S to save and I have the CSS open and it didn't save. Google Chrome. There we go. I guess I'm picking the wrong one there, huh? So there we go. So now we have some colors, right? So at least we can start to distinguish all the pieces and parts, right? Okay, I want this thing to be responsive and I want it to be only 80% of the width of my browser window, right? So I have one more thing that I need to explain to you and I have some visuals on here, but I'm going to draw it on the whiteboard because I think it makes more sense on the whiteboard. We're going to talk about the Box Model. Okay, so here's the types of CSS that I already put on the whiteboard, right? So we've got our classes, our IDs, and our HTML tags, right? Now, we're going to switch over to this thing called the Box Model. So what the heck is the Box Model? This is like the cornerstone of CSS. Okay? Okay, I have content. Okay? This content can be anything. It can be a paragraph. It can be a header. It can be an image. It can be anything, okay? Just some sort of content. All content, whether you can see it or not, has a border. All of it. I can put a border around anything. I can put a border around a picture. I can put a border around a paragraph. I can put a border around a header. Okay? It all has one. You just don't usually see it, they're not usually turned on in Designer, right? So, border. All right. Now, between my contents and my border, I have space. This space. This space is called padding. I can control my padding on just one side, both the top and the bottom, both the left and the right, or all four sides, however, I want to control it. Okay? So this is padding. It creates spacing between my content and border, okay? So it'll create spaces around it. On the outside of my border, I have space and this space is called margin. And just like my padding, I can control my margins. Again, I can control just one side, both top and bottom, both left and right, or all four sides, okay? The purpose of my margins is to keep things away from other things, right? So if the kids are fighting in the backseat, they're too close together, give them a little margin and separate them. Wouldn't it be nice if it worked like that in real life? So margin is going to keep things apart, okay? So, you can see on the screen, I've got the Box Model, padding, and margin. I think it's a little easier when I write it out. And then I've given you a little bit of an example here. I know it's hard to see here, so I have some actual examples I'm going to show you. But if you look over here, so padding, this has less padding than this, right? So there's more padding in there and then these guys have less margin than these guys. All right, these guys are farther apart. So let's take a quick look. I have a few web pages that kind of explain some of this stuff a little bit better. We don't need that anymore, I'm all done with that. I'm going to my desktop. I'm going to... Let's see, (inaudible). Oh, I know. I have it in Dreamweaver. I have it in a different file. So I can go to Files and I can change sites. I have it in this site. I'm going to open these guys up. Actually, I'm not going to open those. I'm going to do this one, and this one, and this one, and this one. Okie doke. So let's take a look at the Box Model first because that's what we're talking about. So here I have some content. I'm going to close this up. I shouldn't have closed that up that way. Okay, content. I've got a header and I have a paragraph, and you can see, it's got my lovely pink and it has a brown border, right? And it's got some stuff going on over here. So what I want to look at is I'm going to go back into my CSS Designer. This is all written...the CSS in these files is written in the files themselves, in the head section, okay? So I can have CSS written inside of my HTML file or I can have it as separate documents, okay? So I just wrote it in here. If I come in here and I look at my h1... I'll show you how that Show Set works, I do Show Set, it's still kind of complicated. So instead of looking at it this way, I think it's easier to look at it this way. Let's look at it in the document. There's my h1, so my heading, the one that says, "This is my content." Background color is pink, the width is 500 pixels, the padding is 15 pixels. That's the space between the content and the border. I've got a border and I've got a margin of 50 pixels. I scroll down, I've got a paragraph, padding 15 pixels, margin 50. The thing that I want you to know about the Box Model, they both have 50 pixels of margin. That is not 100 pixels between the two of them, okay? So it's only going to take one of those. It says 50, they're 50 apart. It's not going to double it. Years ago...it should be better now. Internet Explorer was the problem child and it decided, well, you said 50 on both, so it made it 100. So that was the problems that we used to have with Internet Explorer. They've kind of got on board, 11 and up, right? Hopefully. So just to kind of show you how this works, if I come in here and I change these guys around, let's say I want padding 5 pixels, I'm going to delete the 15, and you can see it shrinks, right? Same thing with the margin, I'll just delete the margin altogether. I have to delete it on both. No more margins. No more margins, right? So, the margin was on the side as well, so now they're all closer together, okay? So that's kind of a little crash course in the Box Model. So what else do I have in here? All HTML comes with default formatting. By default, it comes with formatting. So this is what it looks like. There's no CSS on this. So if I go to CSS Designer, look, there's no source. There's no CSS inside, there's no CSS that it's linked to. But look, in h1, this is what default styling looks like. That is what an h1 looks like. So, it's Times New Roman, text is 16 pixels or 1em or 100%, okay? That's important. I'm going to write that down because designers like to know these things because they get, "How do I make it exactly the way I want?" So, default text is 16 pixels, 1em, 100%. You guys know what ems are? For those of you who don't know what an em is, an em is just a measurement for fonts based on the letter "M." The letter "M" is the widest character in the alphabet. We have em dashes, which are really wide spaces, we have en dashes, which are more narrow because it's a little letter, "N," right? There's other measurements, but these are the most popular. We use pixels, ems and 100%. We don't really use points in web design, those are print terms, right? - [Woman] If you're doing a responsive website and someone mistakenly used pixel sizes rather than ems, what will happen? - It's fine, we're going to use pixels. - Okay. - It's all good. It's all good. You can mix and match, not a big deal. If you wanted a responsive image and you specified the width and height, then, of course, it wouldn't work, right? But we'll get to that, we'll get to that. Okay, you can see... So I showed you the Box Model, there's padding, there's margins. There's padding and margins in what you're looking at. I know it's not obvious, but let's look, right? We look at the headings, look at the spacing between the headings, inherently, there is padding and margins built in to the HTML. There is spacing in there. Then we have an unordered list. An unordered list has margins and padding built in. It's indented, right? So all this stuff is built in which can make for some frustrating designing. When you're trying to design something and the basic stuff is getting in the way, you can't beat it into submission, right? But we can beat it into submission, we do have a way of doing that. We're going to use what's called a Reset CSS.