FREELessons: 32Length: 5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.2 Resets and Normalizing

[SOUND] In the next two lessons, I'm going to teach you about using reset style sheets and grids. So a few lessons ago, I noted that didn't it seem common that we are always overriding the browser's default styling, and if we want to fix that, we can use a reset style sheet. So there are a couple of ways to do this. We can either create one on our own, but it's much more common to use a popular reset style sheet, and that way we can be sure it's up to date, we don't have to worry about it. One of the most popular is created by Eric Meyer who is very active in the CSS and the web standards world. We can go to, and we can see here that he has created a reset style sheet, and this will take all of the browser defaults and bring it back to zero essentially. Notice he's resetting the margin and padding on every element, so that we don't have to do that. And what you'll see is this will bring our pages back to a very raw state. I'm gonna copy this and come into our Editor, and next within CSS, I could place this like so. But it's also common to create a new file called reset.css, and then we'll paste it in. Now if we want to include this, we can link to it in our index.html file. Using our new zen coding skills, I can type link. And that will automatically expand, and I can simply reference it. Now notice, I'm having two links here, and this is a bit beyond the scope of this course. But it's important to keep in mind that you don't wanna link to ten different style sheets in your project because that's more what we call HTTP requests that the browser must perform. So what you would probably do is, before you deploy this, you would either run a script that would combine these together, or you can manually create a new file and copy all of your style sheets into it and then reference that one CSS file. And what this is going to do is because you're not loading as many files, the page is gonna load much more quickly, so that's something to keep in mind. For now, we're gonna separate these for understanding's sake. Save that, and let's create some markups. So we'll do what we did last time. Create a wrapper and a header with a heading one that says My Website. And then a nav element, with a ul with three list items, each which has an anchor tag. And we'll also give a href to each anchor tag of a pound sign. Good, and now we'll say Home, About, Contact, and then finally, below here maybe, we'll have a new div with main, with p that says body of my website. And that looks good to me. So let's view this in the browser and see what it looks like with the reset applied. And now I want you to note everything has been reset. If we remove it, you can see we're gonna receive any browser defaults, but if we get rid of it, it reduces everything to their absolute defaults. The headings don't having any font weight. List items don't receive any bullets. There are no margins applied. So it's important to note that there is a lot of debate on whether this is helpful. A lot of people feel that they should not use the reset because they're going to add a lot of these stylings back in anyways, and that's a waste of time. Other people feel, and I think I fall into this second group, is there's less work to do when you understand exactly what every line is doing. So I don't have to think, hm, I wonder if the browser's applying margin here? I can know, nope, if it's being applied, it's because I specified it. However, you should decide for yourself. Another popular tool is what we call normalize.css, and this has been gaining a lot of popularity. And what normalize does is, it's not as much a reset as it will normalize all browsers. So it will take any inconsistencies that are fairly common in older versions of IE. Perhaps, the padding on a ul won't be identical to what it is in a newer browser, things like that. It will correct bugs. It will normalize styles. So let's check out the demo. And you can see here this is what we would call a base. So it will automatically apply anchor tags. It will set site elements correctly. It will make sure mark elements are highlighted. You might prefer to use this technique as well. If you wanna download it, you can just click right here, and it will link to a style sheet, and you can copy that, bring it into your project. You would probably create its own style sheet. But then if I reload the page, you can see it will normalize that. So you'll reset everything to the defaults and then use normalize to fix common issues. In this case, buttons can be a little bit odd in Firefox, same thing with WebKit. Anyhow, I definitely encourage you to look through this because it will teach you about a lot of the browser inconsistencies that exist. And for this long style sheet, you can see that it's quite a bit, definitely consider doing this. And what you'll find in the next lesson, when we start learning about grids is that many grids provide their own reset, which are generally going to be quite similar to Eric Meyers, so we'll take a look at that in the next lesson.

Back to the top