Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Layout Basics Getting Started with CSS Layout CSS Reset with Normalize

In the shayhowe site it is mentioned that ..

It is mentioned that, if you are using css reset method normalize css, you should know what you are doing. He recommended to use eric mayers reset. What does it mean?

4 Answers

Stephen Bolton
seal-mask
.a{fill-rule:evenodd;}techdegree
Stephen Bolton
Front End Web Development Techdegree Student 7,933 Points

Here is the answer that always made the most sense to me. Normalize does change a lot of things but it keeps some of the default padding around block level elements and other things that are right about the browser default agents. Reset.css is kinda like a nuke it sets everything to 0 and lets you build from square one. I find that when I use Reset.css a lot of times I have to put back in margin, padding, etc that normalize would have kept. So if you want to start a project from CSS scratch and control padding, margin, and everything from the get go use Reset If you just want to make things look the same everywhere and tinker a little bit with styles use normalize.css

Thanks for the answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points

All normalise does is resets the default browser styles for all the major browsers so that when you're starting a project, you're on as big a level playing field as possible and all browsers should look the same.

But if you want to customise it, that's when you should familiarise yourself with what's going on inside the CSS file.

If you want to use normalize.css like this...

<link rel="stylesheet" type="text/css" href="normalize.css" />

As it would appear in the head element on a HTML document, then make sure it is the first file referenced in your list of CSS files. Remember that the order of styles applied in a HTML document matters. :-)

Good luck!

I appreciate your answer. But I am asking a different thing here. Like how eric mayers is different than normalize

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

I'm not sure of the specific differences.

But in real terms there's no difference between the 2. I think Meyer's reset is possibly easier to understand and get into but really it does the same thing is normalize. :-)

It removes browser inconsistencies. :-)

This one I'm talking about

There are a bunch of different resets available to use, all of which have their own fortes. One of the most popular resets is Eric Meyer’s reset, which has been adapted to include styles for the new HTML5 elements.

If you are feeling a bit more adventurous, there is also Normalize.css, created by Nicolas Gallagher. Normalize.css focuses not on using a hard reset for all common elements, but instead on setting common styles for these elements. It requires a stronger understanding of CSS, as well as awareness of what you’d like your styles to be.

The above text is taken from learn.shayhowe.com

Kevin Korte
Kevin Korte
28,149 Points

Normalize resets a lot more than reset.css does, so it just depends on what you need. I tend to use normalize over reset as it's a bit more comprehensive and I find how opinionated it is generally still works for me.

How exactly is it opinionated, can you give me a little on that perspective!

Kevin Korte
Kevin Korte
28,149 Points

Normalize goes a bit further by setting things like font size and margin on h1 tags, removes outlines on a:active and a:hover pseudo classes, and what not.

It's opinionated in that it resets more elements that reset css does when compared to browser defaults.