Skip to main content

art & design

Create Websites with Dreamweaver

Lesson 12 of 26

How to insert a CSS Reset

Melissa Piccone

Create Websites with Dreamweaver

Melissa Piccone

buy this class


Sale Ends Soon!

starting under


Unlock this classplus 2000+ more >

Lesson Info

12. How to insert a CSS Reset

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

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

Student Work

Related Classes



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.