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.