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

HTML How to Make a Website Creating HTML Content Include External CSS

Posted by diegoholt
diegoholt
1,076 Points

Questions regarding normalize.css

So normally, if we don't include normalize.css, each browser just uses its default css? Which in our case would have been like bullets and slightly different format?

By including normalize.css, we override that and use our OWN css? Is this normalize.css file pretty standard for most websites? Or are we just using it now in order to learn?

Thank you in advance for the help!

A X
A X
12,842 Points

Diego Holt Thanks for bringing up this question. I also have been wondering about normalize.css. I'm glad I'm not the only one :)

4 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

It is extremely common to use. In fact, if you look at the github repository found here http://necolas.github.io/normalize.css/ you'll see a list at the bottom of some big sites that use it. Among others, Twitter.

Every browser (Safari, Firefox, Edge, etc) has slightly different default values for list types, margins, paddings. The list goes on and on. What normalize.css does is essentially nullify those default settings to give you a blank slate to work with. Hope this helps a bit!

edited for additional note

Additional note: Because this is so common it also means that there's a great chance that the person looking at your site already has a copy of it in their cached files :smile:

diegoholt
diegoholt
1,076 Points

Thanks Jennifer! That was a lot of help!

J V
J V
4,471 Points

Holy smokes, Jennifer! Looks like you've been hard at work here at Treehouse. I know this has nothing to do with the question, but I had to comment. How's the learning going? Did you have any prior code experience before you joined?

I started in April. No knowledge whatsoever about any of this stuff. Started the Web Design Track and completed the "How to build a website" portion, before losing momentum. Decided to redo it before moving on.

Seeing how quickly you powered through some of these tracks got me motivated again. I plan on completing this part of the track by end of week (since I can skip the quizzes this time around). Hopefully complete the full Track in the next few weeks. Then move on to Front End >> Full Stack Javascript >> PHP >> Maybe Rails... then hopefully I can feel comfortable practicing and doing small projects :)

Anyway, great answer. Happy coding!

McCoy Buck
McCoy Buck
672 Points
McCoy Buck
McCoy Buck
672 Points

Thank you Diego Holt for posing this question this is also something I have wondered...

I was talking with a front end web developer at my work place and was really interested in getting into his department. One of the things we talked about was normalize.css. He mentioned the following "honestly, if you really want to learn everything, i would try to build a website without using any kind of plugin or third party things like normalize or bootstrap or anything...it will take more work, but it will allow you to see how things work and how to fix them. The problem with using normalize when you are learning is that you won't be able to tell what is being done with normalize and what the browser does naturally"

So I thought that was an extremely good point. Which leads me to my next question. If tree house has these tracks set up to learn the ins and outs and really understand what is going on, why are third party plug ins being used? Or DOM's for mobile rather than first learning perfectly well how to set up a desk top website.

Again I am also really new to all of this and the system seems to work already for others but was something I wondered after talking with this devoper.

Best regards,

McCoy

diegoholt
diegoholt
1,076 Points

Hey McCoy,

From what I understand normalize.css isn't really a plugin. It just sets up and underlying behavior of what a web browser will do rather than just letting the browser default to something that would vary from browser to browser.

I think this is different from bootstrap which gives you a lot more code that you can just copy and paste for elements (correct? I'm not too familiar with bootstrap).

I may be wrong, since I am also new to this; however, that is my understanding right now :)

Best of luck!

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

McCoy Buck Hi there! Just noticed that you posted this.

Now, when your friend says not to use Bootstrap and other frameworks like that, I'm with him 100%. But, when it comes to normalize, I disagree. Ironically enough, the same reason I think you should use it is the same reason he thinks you shouldn't use it.

Normalize is there to give you a blank canvas to work with without the browser doing strange and unexpected things to it. I'm of the opinion that if you want to know what your code is doing then your canvas should be as pristine as possible. Now, you can have the best of both worlds. What you can do is this: simply include normalize.css and make your site. Then comment it out and take a look again. And view it in different browsers. This will give you an immediate and visual representation of what's being done by the browser instead of you :smiley:

The reason we do mobile-first is this: it's the simplest way to do it. It's infinitely easier to scale a project up so that it looks amazing on a desktop than it is to take a great looking desktop website and scale it down so that it even looks remotely decent on a mobile device. The same can be said for app development (as I understand it). For example, if you can get an app to look decent on a telephone, chances are it's going to look even better on a tablet.

Hope this helps! :dizzy:

McCoy Buck
McCoy Buck
672 Points
McCoy Buck
McCoy Buck
672 Points

Thank you Jennifer and Diego I know at one point it will all click. I just thought it would make sense to know how it all functions.

Commenting out normalize.css is a really good idea though!

Best regards,

McCoy

J V
J V
4,471 Points
J V
J V
4,471 Points

Jennifer, thanks for recommending code pen and taking the time to reply to my comment. Awesome quote generator. Followed you on Twitter in case I start losing hope, lol.

Cheers,

Jordan_

McCoy Buck
McCoy Buck
672 Points
McCoy Buck
McCoy Buck
672 Points

Hang in there man,

I am in the same boat. I went from books to YouTube to codecademy trying to figure out what works and what will help me stick with it because I always seem to find that one spot where I get completely lost and can't find a good enough example to solve the issue.

I really thing Team Treehouse has got it down with these tracks.

best regards,

McCoy