Add and Explain CSS

 

Create Websites with Dreamweaver

 

Lesson Info

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.

Class Description

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: 
  • 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 
Join us for this helpful class that will give you the tools you need to have your website up and running.


Software Used: Adobe Dreamweaver CC 2017

Reviews

lovemydreams
 

Great Class! Her teaching style is easy to follow and I feel like how excited she is about teaching Dreamweaver. I've taken other classes and by far Melissa class is worth taking because she loves creating websites. She shows coding and explains it in a way that if you are new to it you will understand. Learning Dreamweaver with Melissa is fun and worth it! Thanks, Melissa and creativelive!

Kathleen
 

I love this, she's great BUT...she's going wayyyyyyy too fast. I'm watching it live and working from scratch along with her but I can not keep up and I'm not a beginner.

Linda Knapp
 

She did a good job at touching a variety of different parts of Dreamweaver and showing how to use its capabilities. She did go pretty fast and I had to do a lot of rewind and rewatching as I built the sample website along with her. I would have been frustrated if I was in the classroom. All in all though I found the class easy to watch and informative.