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

Posted by Moorthy Andy
Moorthy Andy
6,754 Points

normalize.css

do we need this file for every new website that we're going to build? how can one learn to code this?

2 Answers

Joseph Wachira
Joseph Wachira
18,063 Points
Joseph Wachira
Joseph Wachira
18,063 Points

No we don't, but yes we might need it!

Here's two really good articles that will educate you on what a CSS reset is and if you should use one:

  1. What Is A CSS Reset?
  2. Which CSS Reset Should I Use?

After reading those don't forget to check out this: 2015's most popular CSS Reset scripts, all in one place

Happy learning :)

Johnny Garces
PLUS
Johnny Garces
Courses Plus Student 8,551 Points
Johnny Garces
Johnny Garces
Courses Plus Student 8,551 Points

WHY use a css reset like normalize: Say a visitor to your website is viewing it on Chrome and someone else is viewing it on IE or Safari- there will be instances in which the margin and padding on both sites are different, or the form buttons look different. This is because the browsers are using their own vendor/default CSS styling. Pain in the butt, but these inconsistencies can be mitigated with a css reset like normalize.

HOW TO USE IT:

step 1: Download normalize.css to your styles folder where you will be housing your css files (mystyles.css and normalize.css) step 2: In the <head> tag of your index.html file, be sure to reference the fact that you will be using 2 css files: the first css file to reference is normalize, and the second will be your very own custom css file (mystyles.css), like so:

<head>
   < link rel="stylesheet" href="styles/normalize.css">
   < link rel="stylesheet" href="styles/mystyles.css">
</head>

NOTE: your custom css file (i.e. mystyles.css) must be on the bottom after normalize.css

step 3: in your index.html, type in anything like a h1 tag

<h1>Hello World</h1>

to test it out, and you'll notice a different font-style and the paddings/margins are reduced to 0. This means that normalize is working and inconsistencies are reduced across different browsers.

Hope this helps :)