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 Raowaa Mahmood
Raowaa Mahmood
3,337 Points

Normalize.css

Hey guys! I was just wondering, do we have to use normalize.css in each project? And if we have to where do we access it from? Thanks.

3 Answers

Codin - Codesmite
Codin - Codesmite
8,600 Points

Here is the source location of Normalize.css with the latest version: https://necolas.github.io/normalize.css/

You do not have to use normalize.css, but it is a useful tool for resetting browser designated defaults on css elements, so you do not have any unexpected rendering difference between browsers on your project.

For example:

b, strong {
  font-size: 2em;
  color: rgb(0,0,0)
}

/* 
The above code will render as the following in Firefox 4+, Safari, and Chrome
 because of browser defaults 
*/

b, strong {
  font-size: 2em;
  color: rgb(0,0,0);
  font-weight: bolder;
}

/* In everything else it will render as the following */

b, strong {
  font-size: 2em;
  color: rgb(0,0,0);
  font-weight: bold;
}

/* normalize.css contains the following to normalize the browser defaults */

b, strong {
  font-weight: bold;
}

This is just one example of many different browser default element differences between browsers that normalize.css keeps consistent without you having to worry about.

The only thing I personally dislike about normalize.css is the bloating inside the file (Lots of whitespace and comments). But it is fairly quick and easy to minify it.

Minified version of 3.0.2 that I use:

img,legend{border:0}legend,td,th{padding:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}table{border-collapse:collapse;border-spacing:0}
Raowaa Mahmood
Raowaa Mahmood
3,337 Points

Thanks for the link Ashley.

rmgvqegryz
rmgvqegryz
3,970 Points
rmgvqegryz
rmgvqegryz
3,970 Points

If you want to use Normalize.css, you can download it in the teachers notes of this lesson... How to make a website - creating html content - include external css Link: https://teamtreehouse.com/library/how-to-make-a-website/creating-html-content/include-external-css

Raowaa Mahmood
Raowaa Mahmood
3,337 Points
Raowaa Mahmood
Raowaa Mahmood
3,337 Points

Thankyou Jochen Loete. normalize.css usually accompany the author css. I guess it's to reduce the chance of any unpredictable results interpreted by browsers by resetting the default styles.

rmgvqegryz
rmgvqegryz
3,970 Points

Yes, it makes your styles behave more predictable "on different browsers". And you don't have to use it, but for the argument above stated, you may consider to use it. Just like you and Asley Skilton mentioned.

You're welcome.