This lesson is exclusive to members

Responsive Web Design Essentials - HTML5 CSS3 Bootstrap

What is a CSS reset zeroing eric meyers vs normalize

Daniel Walter Scott

Download Exercise Files Download Completed Files

Contents

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

Introduction

I recommend hosting your new website with Bluehost, you can get a big discount by signing up with this link: https://www.bluehost.com/track/byol/byol_webess_35

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up
Hi there, in this video we're going to discuss, things like Normalize, Reboot, HTML5, Dr. Eric Meyers' Reset. Basically they're all the same thing, they're called CSS Reset. What do they do? The real quick version is that, by default, lots of our tags like H1s, H2s, some of our Lists and P-tags, they all have styling applied to them. A CSS reset, you add to your CSS to get them all looking the same. These are still H1s, still H2s, and still unordered lists, but they all look the same, and we as Designers get to go through and decide what the size is, what the font is, what the weight is, without letting any the defaults, or fighting against them. 

So CSS Reset, also note in this video coming up, I say Eric Ries a lot instead of Eric Meyers, because I'm reading the Eric Ries book, Lean Startup, for like the third time, and he's in my brain, so I will toggle between those two names throughout this video. Sorry, Eric Meyer, let's jump in. 

I know we just created these files but let's close them down. We're going to create like a throwaway file first, just to kind of prove the points, and then we'll get back into applying it to our actual project. So we're going to create two files, two new files. Let's save it, this one's going to be called 'deleteme1', or just call it 'deleteme.html'. I use the word delete me, so I give permission to my future self to bin this without even checking it. You know, you make these files, and you've got them on your machine, and you're like, "Is that important?" If I call it ‘delete me’ I give myself permission, to leave it without even checking it. 

So I'm going to save this and have 'deleteme.css'. So I've got two, deleteme.html, deleteme.css Let's connect them up, separate them out like the last one, and put in your Meta data, and connect them up. It's good practice. Link. CSS, it's not called style in this case, it's called delete.css So what is this CSS reset stuff you talk about? So basically whenever we make a document in HTML there was predefined stuff. So if I make an H1, and I call this one my Heading, and I hit Save, and I preview it, it will note that wasn't working for me a second ago. I couldn't find that little button, if you can't find that little button, just right click your page here and say, Open with Live Server. The joys of plugins. 

So I've got it open here. We know, if we put it in our Heading, it makes a big bold, black, Times New Roman. There's padding above it, there's some spacing on the left, there's definitely some spacing underneath, it's just, those are the defaults. Somewhere, in like the days of yore of internet, somebody decided that's what an H1 should look like, all the time. First thing I do as the Designer is I want to change it. That's where this CSS reset comes in. I want to actually-- I want the Heading to look exactly the same as Heading2, exactly the same as a paragraph, and I will decide what size they are, not kind of fighting against the defaults. 

So let's look at doing it to see what it does first. So over here we've got our Heading1, let's put in Heading2. Heading is just going to be-- now putting in place holder text is a chore, because you have to think of something to put in, like I do this all the time. So we put in some fake text, it's called Lorem Ipsum. You probably might have come across that again in different places, but basically if I type in Lorem, with an 'e', and hit 'Return', it puts in a bunch of mixed up Latin words. They're all words but they're all kind of jumbled up, but there's a kind of a cool, like--

I'm going to save it. Can you see, it's just a nice little place holder. That one's a bit long so I'm going to do a couple of things, one is I'm going to turn my wrapping back on. So if you toggle Word Wrap, and what I'll do is, I don't want that many words, so it gets even better, Lorem, this is using Emmet, remember we talked about it before, so abbreviation, and let's say I just want five. So Emmet, no spaces, 5, hit Return, five words; cool, huh. Let's put in some other kind of default tags, I'll put a P-tag, and I want this one to be Lorem of say 20, hit Return. I'll put in a couple of other tags that you don't know about yet, let's go ul, inside that ul put an li. It's an unordered list with a list item inside of it. 

If you're like, "What is that?" we'll deal with that later on. So an ul and an ol, with 'li's in the inside. If you can't make those happen, don't worry, it's not really important. They look like-- oh, have to write 'something in the middle' here. So I'm going to, 'something in the middle'. You're watching me, sometimes I get a bit non flowy. So unordered list is a bullet point, ordered list and ol has a number, but they would have their own kind of like, things, there's spaces between these, this is indented. This one here has a big gap, that one has an even bigger gap. This one's Bold, this one's not. So let's clear all the defaults by doing a CSS Reset. 

Now is there a specific one you can use? No, there's a zillion of them, you can make your own one. The one that I use the most, and it's quite popular around the internet, if you look in your Exercise Files, there's one called Project2. Let's open up this one here, CSS Reset - Eric Meyer. He was kind of like the most famous - this guy here - Web Developer, he made a CSS Reset, everyone used it. It's been updated a couple of times, I still use it, I love it, but there are other ones. 

There's things like Normalize, we'll discuss in this one, but there are other ones that we won't cover, they're just kind of alternatives for it. There's one called Nor, would be Normalize, we're doing that one. Reboot, HTML5 Doctor. What else? Those are the ones that comes to the top of my mind, but there are lots of ones. And if you're like me, you end up starting with something like Eric Meyers one, and then adjusting it as you want. So I'm going to open it up, I'm going to copy all of this stuff out of it. I'm just selecting it all, copying it, and I am going back to Visual Studio Code. 

Now where will you put it? What we'll do is we'll put it in this delete.css, we'll paste it in, and that is it, that's all we have to do. I'm going to save all, both sides. Now let's look at the document. So it just clears everything. It just says, we're all the same, we're all equals here. You can now go through as a Designer, and say, now down the bottom here, after all of this I can say, I want my H1 to be Arial, no I want to put a different font. Family of Arial, semicolon, ';'. So now I get to the site, and I kind of build it up from there. 

Can you see the kind of logic in it at least, you might not like it, you might like to start with all the defaults, and that's totally fine. What else am I doing? I'm going to talk and code, there we go, I made it bigger. I do this whenever I'm starting a new site, I will go through, grab Eric Meyers one, and just paste it in the beginning, and work from the bottom down. Let's look at this one versus say Normalize. 

So I'm going to delete all of this, delete it. Look at the Normalize one, it does, like a different flavor of it. So what Normalize does, instead of kind of resetting its defaults, what it does is-- I'm going to copy all of this, paste it in, save it, and have a look, you're like, "Hey, that looks really similar to what it was." And it kind of is. What I'll try and do is I'll open that one, I'll be back in a second to compare them. Set them up side-by-side, and you're like, "They look the same", but look, the padding's different in the side there. I guess the big difference between it is, Normalize adds consistency across browsers. So we know that we're using Chrome in this case, it's our browser, but you might be using Microsoft Edge, or Microsoft Internet Explorer, or Mozilla Firefox, Safari, there's lots of different browsers. 

The problem with all these different browsers, they've all decided to interpret it, our H1s, our H2s, our P tags, all of these things slightly differently. It's a little hard to show the extreme so I'm showing you in Safari. It just looks different, Firefox, it looks different, the spacings a little different. Now what Normalize does is that it will make it consistent across all of them. All of them have the same Padding on the side, all of them have the exact same spaces between them. That is the job of Normalize, there it is there. Instead of trying to do things and testing on one browser, and it's like, "Why is it different on this?", Normalize is a way, it's really quite beefy bit of CSS, that just tries to, I guess make everything look consistent. 

You can see in here, there's lots of commenting. You can see, this little option here, this weird little hack, will make the font sizes of H1s, when they're in a section, an article, be consistent across all of these different browsers. That's its job, consistency, it's still a CSS reset, but it's doing something slightly different. It's just making everything look the same, whereas the one for Eric Ries makes everything nothing. So go away everything, this one just says, let's everybody be the same; does that make sense? Maybe the first time, not the second one, that's bad teaching, Dan. 

So what I'm going to do now is go and apply it, we'll do it in a second actually, we'll apply it to our Project2 site, but a couple of things to think about when you are doing it, is never put this in halfway through a job, because it's like a house of cards, right? When you start building stuff everything relies on everything else, you style a Body Tag to be a font, but then you change the H1 to pick a different font, and it's kind of built on top of that original Body Tag, and it's a teetering Tower, so you can't just go and throw it at the top of your document, and hope to fix some problems, Doesn't work, just leave it out, if you have got a site that doesn't have it, I show it to you because you'll have sites that already have it in there, and you'd be like, "What's all this stuff, I don't even know what it does", and you start deleting stuff, and you'd be like, "Yeah, it's not doing anything." It's because somebody has used a CSS reset like this.
 
The other thing to note is that it is very opinionated. People don't like Eric Ries' one because of x, y, and z, and another person thinks it's good, but, "They should change this," and, "He should have done that." There's a lot of these different resets, I've only just given you a couple, but there are loads of them out there, and you will find the times when you're like, "Actually, that CSS reset's not working for me", so you'll create like a Eric Ries', Eric Ries, modified by Dan. I keep saying Eric Ries, he's a different person, he's Eric Meyers. Eric Ries is, you've seen The Lean Startup guy? Anyway, you get what I mean, right? 

So let's go and implement this, I'm going to not save it, because I don't-- it was just like a little throwaway test page, and what I'll do is I'll delete it over here, to make it nice and clean for our notes, let's go and delete, gone. Let's open up both of these, double click them, they'll open up two tabs, rather than just one. And we're back. So to apply them you can just dump them in the CSS, most people, me people included like to keep it in its own separate sheet. So what we'll do is we'll create another file, save it, and I'm going to call it css-reset, no spaces. Hit 'Reset', let's click 'Save'. 

So we've got two Style Sheets, only one of them is connected, and we need to add two of them, and this is really important where it goes. Cool thing about CSS is you can have as many as you like. You can have two of them, just to separate everything else out. For small websites you don't really need to do this, unless you've got something like this, like a CSS reset. And what do we call it? We call it css-reset. And the big thing is this order. Your reset needs to be in front of your Style Sheet, otherwise it will do really weird stuff, because you're going to say, be H1, and your own one, let's say, it's back the other way. The page loads from the top to the bottom. The very first thing the browser sees is like, "Hey, I'm HTML", and it goes thumbs up, and then it says, "Hey, I'm written in the English language," and it goes thumbs up. So it's reading it down from the top. Gets to here, gets to here, gets to here, then it will get to your style, and you say, "I want my Heading1 to be white", and in the reset it says, "Hey, everybody be black", and then it carries on. 

So you can see how the problem would be, right? The things that you carry keep getting reset back to normal. So make sure the reset is above your CSS, and my style, there's nothing in this one. In my CSS reset I'm going to paste the Eric Ries one, not Normalize. Copy. I'll show you this now because you're like, "It's a bit weird". You're going to find websites that have it, and when we later on do things like Bootstrap, that is going to do it for us, so it's kind of nice to introduce it now. You can kind of see what it's doing, it says, all of these tags, be margin 0, 0, 0, 0, just get rid of everything, please. Remember the 'ol's we had, where are they? They're in there somewhere, there they are there. Ordered List, Unordered List, say List Style, none. Get rid of the bullet point and the little number at the beginning, just clear it all off, please. And that's going to be, we're going to close them down now, we'll save them first. 

Now nothing's going to look changed, but I've got this little Style Set reset in the background, doing its thing. So when I add an H1, practicing our little shortcut there, save it, I'm going to open it in a browser. Turn it off, turn it on. There it is there, our little H1, but he's nice and small, and he's not unstyled. We're going to get rid of the H1, he was just a little placeholder, and we'll do commenting just to make it really clear for ourselves. We did commenting over here, remember, we did, stuff, and then we wrapped it up in those tags. Remember, it is ' Command / ' on my keyboard, or you just have to type the forward slash, asterix, ' /* '. For HTML it's a different bit of code. 

So what I want to do is, say that 'This is Eric Meyer's CSS reset', just to help me later on, my future self to go, "Yep, that's what that is", but I can't just leave it like this, I need to wrap it in my tag. You can use the same shortcut, ' Command / ' on my Mac, ' Ctrl / ' on a PC. You can see, HTML commenting is a lot bigger, you need to put in, square brackets, exclamation mark, two hyphens, ' <!-- ', and the other side is just two hyphens and angle brackets, ' --> '. So once you've got it in there, this is really handy. So I can be just a little bit more specific with my labeling. 'This is my own Style Sheet'. 

Let's separate them out with the 'Return's, because that's the way Daniel rolls, and Document Title we almost forgot about. It's called 'Roar Cycles', and it is 'Bike repairs in Dublin'. Nice juicy keyword rich title there, let's do a 'Save All', and I will see you in the next video.