Skip to main content

What is CSS

Lesson 7 from: Create Websites with Dreamweaver

Melissa Piccone

buy this class


Sale Ends Soon!

starting under


Unlock this classplus 2200+ more >

Lesson Info

7. What is CSS

Lesson Info

What is CSS

HTML, you can see, it's really easy to create HTML, right? Super easy to code yourself, super easy to create. CSS, not so much. So, CSS can be really simple or really complicated. We're going to do some really simple stuff, however, I do not recommend that you hand-code CSS, because if you forget one tiny, little thing in CSS, your whole page will break, it won't work at all. HTML is very forgiving. You saw I did HTML all in lowercase, it's tough for beginners, they like to do everything in uppercase. Everything in lowercase when we name stuff. Just trust me, lowercase. And then, CSS is very, very picky. So if you mess up HTML, let's say that you forget a caret, you forget an end caret, or you forget a forward slash, you forget something, the browser's like, "Yeah, it's okay. We've been doing this a long time. We know what you meant," and it displays your page properly. You forget one piece of CSS, it's like, "No , not going to work. I'm not showing nothing until you fix that." And the...

n you're going to sit there and rack your brain and be like, "What did I miss?" So, we're going to let Dreamweaver create all of our CSS for us, and I'm going to show you how to do that using the CSS Designer. We'll do it visually. So what is the difference? What is HTML? What is CSS? I like to use a house analogy. Okay. So, we had a house, we're going to build a house and we're going to use brick, and cement, and nails, and wood, and all that stuff, that's our foundation, right, for our house, required. That's our HTML, required for a web page. You have to have the foundation. It doesn't have to be pretty, but you have to have it. So then, the CSS would be like, the paint, and the curtains, and the carpet, and all the pretty stuff that we add to make everything look really good. So, if I have a curtain and I want to hang it in my house, so my curtain is my CSS, I can't just take the curtain and throw it at the window, right? It's not going to work. I need some sort of hardware. I need some sort of foundation for that curtain. And nail will suffice, that's all I need, just a little, tiny nail. So that little, tiny nail is my HTML, so I have to have a piece of HTML somewhere. And then, I can hang my curtain on my nail. So, I hang my CSS onto my HTML to make it look pretty, okay? CSS cannot exist on its own. It needs HTML. HTML can exist all by itself. It doesn't need to look pretty. It's just there. This is what CSS looks like. You can see that it's a little bit different, right? See , one of those things have popped up, then I'm like, "Quit popping up. Go away." It's talking to me about something. So this is a separate page. My HTML pages are saved as ".html," my CSS pages are saved as ".css." Again, it's just plain text, that's all it is. We've got all these curly brackets and we have... Yeah, those guys, see, brain's not working, these guys, colons and semicolons. That's the words I'm looking for. All right, so, all of those are really important to make sure that they're in the right place, okay? And I am going to have you guys look at this and we are going to talk about it and we're going to see what gets created, because I want you to understand it, okay? You don't have to write it yourself but you absolutely need to understand it and understand how it works. If you don't, you can't troubleshoot. Okay? So you have to be able to understand all this. I have a website I want to show you real quick. And it is... We can get rid of these guys. We don't need those anymore. I believe it's this one. This website is called CSS Zen Garden. It's been around forever. It was updated a while ago to reflect responsive design, which is what we're talking about. And what I want to show you about this is I'm just going to go through a couple pages real quick. So this is the first page. I just want you to take a look at the design, right? So we have this header, we have a sidebar, we have some content on the left side. We come down, it changes color. Great. So, on the right-hand side over here, I have a bunch of links. I'm going to click on one of these links. Completely different look to this website, right? So this one has like some boxes and this cool aesthetic background, and it's totally different. But what I want you to know about these websites is that the foundation, the HTML, is exactly the same. There is no difference. Okay? The only thing that makes these different is the CSS. Okay? Again, this site is designed to help you learn. Look.

Class Materials

Bonus Materials with Purchase

Bootstrap Donut Final
Donut Website Image Assets
Dreamweaver Class Notes
Simple Responsive Final
Social Media Icon

Ratings and Reviews


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!


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.

Student Work