Art & Design > Web > Create Websites With Dreamweaver > How To Insert A Css Reset

How to insert a CSS Reset

 

Create Websites with Dreamweaver

 

Lesson Info

How to insert a CSS Reset

Basically what it is, it's a little piece of CSS that says zero everything out, take away all the margin, all the padding, all the styling of everything. So it gives us a blank slate to start working with, okay? And I happen to have it somewhere. I think it's on my desktop, so I'm going to hide others. We are working in simple donuts, right? This is the folder that we're working in. I have a folder called Website Resources and I have something called Reset.CSS. So this is something that once you download it, you can reuse it over, and over, and over again. So what I'm going to do is I'm going to duplicate that into...I'm not going to move it, so if you guys know how to duplicate or copy things over. On the PC you can just copy, but on the Mac, I'm just going to hold down the Option key and drag and drop it. Actually, I'm going to drag and drop it into the CSS folder. So now, my CSS folder has my Main.CSS and my Reset.CSS, and I'm going to attach it. So back in Dreamweaver, I'm going to...

go back to the page that we're working on. I still have my source code in my main, right? I'm going to go to my CSS designer. Let's pull this out again. There we go. I'm going to click on plus for the source, I'm going to Attach Existing CSS File, and I'm going to browse and I'm going to go to simple donuts. CSS, Reset, Open, OK. And now, it's linked. So two things happened. It showed up in here and it's right here. So you guys can see that Dreamweaver is adding the little link in the head section. So I've got the link from our main that we created here, CSSmain.CSS, and then it set a link to the CSSreset.CSS. The cascade, it's called Cascading Style Sheets. Why is it called that? Well, it's called that because there's an order, there's a hierarchy, there's a way things work and it's a lot more complicated than what I'm going to tell you, but my simple way works for me 99.9% of the time. Whatever CSS is closest to your HTML code wins. So mine's backwards. I've got my Reset right now underneath, the link is underneath. It's backwards. Whichever is closest to the code wins. The code, this is the code, it's all down there. I just put the Reset underneath my Main. It's going to overwrite my main, so I'm going to flip them around, super important. Will make you crazy when you're designing stuff. But in reality, you'll be adding the Reset first. Usually, that's the workflow. You create a page, you add your Reset, then you do everything else. So I'm just going to grab line seven, cut it out of there, and paste it above. So now, I have my Reset and now I have my Main. It's a good thing I caught that because in about five minutes, I would have been ready to start cursing because it wasn't going to work for me. All right, you guys, so that part is important. We have our Reset, we've got our Main, we've got more CSS we want to create. Oh, I know, I still have a couple more pages I want to show you, and then we'll get back to it. So we've got our box model. I'm going to close that up. We have our HTML defaults. I'm going to close that up. Now, let's just take a look at different ways to create CSS. So I told you the thing that's closest to the code wins, right? We also have a way of coding CSS, it's called inline CSS. So back in the day before we had CSS, CSS didn't show up on the scene until the late '90s and then you couldn't even use it because the browsers couldn't support it. So I got all excited in like, I don't know, 1999 or something. I don't know. I taught myself CSS and I was like, "This is so cool," and I was like, "But I can't use it." And then I promptly forgot it and it was about five years later before I could use it. So I've got HTML formatting and I've got CSS formatting. So what I want to show you, these pages are identical. You can see in the preview that they're exactly the same. This is the old school way of doing it. Look at that code, it's a nightmare. H1, font face, Verdana, size 5, color blue and font. Oh my God, so I used to code pages like this, you guys. I got a website to do for a company one time that was 300 pages and I was like, "I'm not going to use one of those dumb HTML editors. That's stupid. Why would I ever do that?" I was like... That was the day. I think I used Adobe PageMill or something way back then. So I was like, "I think I'll use an editor, I'm kind of tired of doing this by hand." So just think about it, to go in and change these, let's say I just wanted to change the H1s. Oh my God, I can't even do a search and replace because everything is blue. It would take me days to fix all that. So along comes CSS and I got nice, pretty code. Oh look, H1s, Ps, H1s, Ps, nice and simple. I'm like, "Oh, I want my H1s to be red, cool. I just say red and now, bam! They're red. So much easier. And of course, if I had 300 pages, it would be an external CSS and I just change that to red in 300 pages. Inline can still be used, again, extremely rare. Let's take an example. Let's say you have a 300-page website, and you have a home page, and there's one little H1 on that home page that needs to be red and everybody else is blue. Okay, fine, you can do it for that one, but you want to do it so you remember. You want to do it so you're like, "I know I did that one inline and the rest are controlled by the CSS." Because if it's inline, it overwrites every CSS you've got out there because it's more powerful, because it's right against the code. So again, you can do it, I don't recommend it. If you absolutely must, I still recommend that you do it with a different piece of CSS, but if you must, maybe just one tiny little thing in your website, that's okay.

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