Styling with Fonts
- [Melissa] Okay, so there is a couple of ways to do this. I like to create a Body Tag which does… So here is the thing I wanted to tell you. I'm telling you this because this is like Photoshop. You guys all said that you know Photoshop, right? If I give you all the same project to do in Photoshop, you'll do it five different ways, right? Same thing with CSS. There is no, "This is the right way to do it." No, get it done. If it works, it works. Do it that way and do it the way you're comfortable with, just like Photoshop, okay? So there's different ways of doing things. There's not a right way and a wrong way. So don't freak out about that. The biggest thing that my students freak out about is, do I use an ID or a class? I'm like, "I don't care just use one, it doesn't matter. Just pick one." Right? And then if later down the road you run into problems, then we'll revisit the issue. Ninety-nine percent of the time it's not going to be an issue. It doesn't matter, we don't have to revis...
it it. So actually what I want to do is I'm going to create a New Selector. I'm going to start with Container because I want it to go above because body should be at the top for everything. Click plus, didn't go to the top, that's all right. Body. I want to set up some basic stuff like text and I don't want to use Times. So I'm going to go to Font Family, I'm going to click on the little place where it goes to Font Family. I don't know what they're thinking. I don't know what you're thinking, you guys. I'm on the Dreamweaver Beta Team, I need to go smack those guys around. These are dumb choices. Okay? So... - [Female] Really? - Yeah, right? - Oh God. - Exactly, right? I'm like, "What are you thinking?" Right? So it's okay, we have this little handy- dandy button called Manage Fonts. - Oh, great. - And look what comes up! So now we've go this new thing and we have these Adobe Edge Web Fonts. You're like, "Those are cool. What are those? I want to use those. Those are neat. You mean I don't have use Arial or Verdana?" No, you don't, actually. You don't have to use that junk anymore. So we've got Adobe Web Edge Fonts, local web fonts. I don't have any of those, Custom Font Stacks. I can make my own. I'm going to start with the Web Edge Fonts. So I can come in here and be like, "These are cool. I want to search for a header." And look, it's even going to help me. It's like, "Oh, look, I want a header. And I want the header to be handwritten." That's actually cool. Let's use that font. So I click on it and I need paragraph type, turn that one off. And I want it to be Sans Serif. Okay, cool. Source Sans, awesome. So what did I… What was the first one? I did Source Sans. - [Female] (inaudible). - I did this and this. I got to write it down. It's right on my stickies. Okay, I know I got Source Sans. - This is going to work beautifully (inaudible). - Kaushan Script, now here is the thing, you guys, we won't be really be able to see it until it's uploaded to a web server, but that's okay. It's not going to be Times anymore on here either. Because we wanted to set our own Font Stack, right? So what I'm going to do now is I'm going to Custom Font Stacks and look, they're there, see? So I need a Custom Font Stack for the first one. So I'm going to go over and I guess to substitute that one. I can type in whatever I want, it does not have to be on my computer. So if I know that I'm using a Google font or something else, I can type that in there and it will add it. I can add it. It doesn't have to be installed on my machine. So I don't know, let's just do… We'll just do, I hate to do Times but we'll do Times. We'll do Times Bold, okay, fine. And I'm going to make it go over there and then we'll do Serif. I didn't mean to click. Okay, get back in there. Manage Fonts. Go back to my Custom Font Stacks. Okay, Kaushan Script, and what did I say? Times. Sure, Times Bold and Serif. Push that over there. So now I click Done and it's an option for me right there. So I've got my own Custom Font Stack, right? So I'm going to go back and I'm going to do another one because I don't actually want to use that one, but while we're in here, I only want to do this once. I'm going to go back into Custom Font Stacks and make another one with Source Sans Pro and I'm going to push that one over there and then if they don't have Source Sans Pro, I guess we'll use Verdana. And if they don't have Verdana, we will use Sans Serif. Guys don't know the difference between a Serif Font and a Sans Serif font, just super-quick for anybody that doesn't know the difference between those. The Serifs are the little... They're chisel marks, that's what they really are. Back in the Roman days when they used a chisel and a hammer. You made chisel marks so the little hangy bits on the letters are the chisel marks. Those are Serifs. So if they're Sans Serif, it doesn't have a chisel mark. Exciting stuff, right? Cool, so I'm going to click... Source Sans Pro is going to be my basic. Click Done, okay, so then I can come in here and I can say Source Sans Pro, Verdana, Sans Serif. Bam, look at that, yes. Sweet. - Yes. - Okay, so that's my body stuff. Of course I didn't change it in Body, I changed it in Aside. How did I wind up in Aside? No big deal because, look, there's a handy-dandy little trash can button that you guys can't see over there, it's hiding, it's there, trash it. Stop it. Being a pill. I'm going to trash all this stuff that has to do with fonts because I don't know why it's jumping all over the place. It's just being difficult. It's like my ratty teenager. All right, we're going to put that up top. So we got Body, uncheck Show Set, go to Text, go to Font Family, choose Source Sans Pro, Verdana, Sans Serif. Now everybody changes, that's more better. And I can change my font, wait, I'm going to change this to 400. It just makes it a little bit heavier and it's normal. And that's all good. I'm happy with that. I'm going to do File, Save All. Okay, it looks good. I want to change up headers and paragraphs. I don't like how everything's all smashed together, right? So I'm going to create New Selector. I'm going to do H1 comma H2. What does that mean? That means if you are in H1 or in H2, that's what the comma means, right? So H1 or H2 you are going to be this guy, Caution Script. And you are going to be...I guess I only have 400. I wanted to do Bold. Can I do Bold? Font style. It's all got normal, normal stuff. That's all right, we're going to leave that there. What else do I want to do with those? I can set the size, so Font Size is going to be 200%. I don't have anything set. That's why it's not changing. Let's add some text. This is a header. Okay, so I'm going to select that guy. I'm going to come down. I'm going to do this in my Properties panel. I am, stay selected. And then in my Properties panel. - What the heck? - It's making me mad. All right, that's all right. I got my hamburger. I got my hamburger. I can click on my hamburger and I can change it here. It says format H1. It did show it. Sweet. So we got a header. We got some H1s going on. I'm going to add a paragraph. Actually, this time I'm going to do...if you are in paragraph or in H1 or in H2. We need some padding, right? We need to get away from the edges, we're all squished. So if you're any of these guys, we're going to go our Layout and we're going to say Padding. Okay, so this is the great thing about this, remember I said I hate numbers? Watch. I got a Scrubby Slider. That's not working because I'm on footer. Why does it keep jumping? Oh my God, it hates me. Okay, let's try this again. I'm on paragraph, I'm on H1, I'm on H2 and I'm going to use my cool Scrubby Slider. - Oh, yeah. - Pretty cool, huh? I really only need 15, okay. So I'm going to do 15 left and I'm going to do 15 right. Awesome, okay, now let's check it out. I know you're not going to work. I know you hate me. It's all good. Dreamweaver and I are having a spat today. I didn't take it out for Valentine's Day last night. - No chocolate? - No chocolate. All right, oh my God. I swear. Okay, all right, we're good. I'm going to hide others. I can figure this out. Simple doughnuts, index. I saved all, right? Yes! I did. So now we have some padding and stuff, too, going on, okay?