Add and Explain CSS
Let's talk about CSS because now we are going to add some CSS to this to make it look a little pretty. Okay? And what I want to do is I'm going to add some background colors, right. I want to add some background colors in the nav and in the header and in the main section. So I'm going to talk about the different types of CSS and I'm going to head over to the white board over here and write this stuff down for you guys. Okay? Okay. So we have types of CSS. We've been working with HTML tags. Right? So we have tag-based CSS. What does that mean? That means that I can redefine what an HTML tag looks like. Right? So a tag-based CSS would be a "p" or an h1. You saw me do an h1 earlier. That was a header. Some of these tags that we just used we have nav, right, we have main, we have footer. So you get the idea. So any existing HTML tag we can create a specific piece of CSS to change what it looks like. Okay? In addition to tag-based CSS, we also have these things called IDs. An ID starts with...
a pound symbol and you make up the name. So you make up the name and an ID is special. An ID carries a lot of weight. Okay, there's a lot of math that goes on in CSS but the good thing is you don't have to know that. Okay? My kids got the math genes. My dad got the math genes. Totally skipped me. I don't do math. I have to look at numbers and I don't do numbers. But different pieces of CSS carry a different weight. So some things will overwrite other things. So IDs are really heavy, okay? They carry a lot of weight. And one of the rules with an ID is that you can only use one per page. Or one time per page. So we use these sparingly. Okay? I don't use them a whole lot because I can only use them one time per page. Then I have these other things called classes. Classes start with a period and you make up the name. Now how do you make up the names for these things? Well, our HTML is semantic. Right? I'm going to write this up here because this is important. Just so you know, I broke my own rule in this thing, too, but semantic. So what does that mean? That means that the name is self-descriptive. Right? So for an h1, it's a large heading. For a nav it's a navigation bar. So it's semantic. It means something. The footer, it's the footer of the page. So when we create names for IDs and classes, we want to do the same thing. I don't want to name something green because next week I may decide that it's red, but it's called green. But now it's red. So see what I mean? So maybe instead of calling it that, what is that green thing? That green thing is actually call out text or highlight text, so I would call it .callout or .highlight. Something like that. So I'm going to give it names for its purpose so it's semantically correct. Okay? It's going to make it easier for you and it's going to make it easier if you share with other people or if other people look at your stuff. Trust me on this. If you ever get somebody else's stuff you want them to adhere to these rules, too, so everybody can figure everything else out. Okay? So we're going to create tags and IDs and classes. Right? So let's go ahead and get started with that, and then I've got more CSS stuff for you after that. So what I want to do is I'm going to start at the top of my page and I'm going to go down. So I want to take the nav section and I want to give it a background color so I can distinguish it from everybody else. Okay? The cool thing is, remember, I keep telling you guys that I don't want you to write CSS. And Dreamweaver sometimes is helpful, sometimes is not, if we get it right. So let's see if we can get Dreamweaver to help us.
Adobe recently announced significant changes to Dreamweaver, offering a brilliant new interface making websites easier to build–and more beautiful than ever before. Empowering non-technical users to build a website, this class you will teach you how to create a basic brochure-style website using Adobe Dreamweaver.
Adobe Certified Instructor Melissa Piccone shows you how to:
Join us for this helpful class that will give you the tools you need to have your website up and running.
- Create a website from start to finish
- Apply web design best practices
- Understand Dreamweaver basics
- Customize Adobe Stock Templates
- Identify basic code to help troubleshoot
Software Used: Adobe Dreamweaver CC 2017