Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Normalize.css

Normalize is a reset file. The reason you need such a thing is that browsers usually apply their own default styles to certain elements (using what is called a “user agent stylesheet”). Resetting your styles puts all browsers on a level playing field, allowing you to start styling with consistency.

Related Links

2.1 Normalize.css

Normalize is basically a reset file. And the reason you need one is that browsers will usually apply default styling to certain elements. They have what is called a user agent style sheet. Now these styles may differ from browser to browser. So in order to get a consistent experience, you need to reset these using a special kind of style sheet like Normalize. This is a project created by Nicholas Gallagher and Jonathan Neal, and let's see how we can use it. You can get the Normalize file by going to its GitHub page, which is this one right here. The link will be in the lesson notes as well. Now you have a few alternatives, and what I'm about to show you now applies to every single library that we're going to use in this course. So you can either download it manually, or you can use either MPM, or most commonly Bower, or any package manager that supports Normalize. I'll be using Bower. And if you're unsure on how to use it, please check out the lesson notes where I've included a link to a 60 second video about Bower. So using it is actually pretty simple. You need a terminal, so you need to navigate to where you want to install it, or download it. And simply go Bower install Normalize or whatever it is that it tells you here. And in our case, it's normalize.css. So I'm gonna hit enter. Of course you need to install Bower first. And right now that whole library has been downloaded in the bower_components folder, as you can see normalize-css. Now to see this in action we actually need some content in our page here, so let's add some. All right, this should do it. We have some headings, we have some paragraphs, some forms. And overall, our page looks something like this. Now the reason you should use a reset file is that some elements might look different in different browsers by default because of that user agent style sheet I mentioned earlier. So this is how it looks like in Chrome. But in IE for example, some elements might look different. Or some elements might not work at all. For example, some HTML 5 elements that will not work in some older versions of IE. So by using a reset file, in this case Normalize, we make sure we bring all the elements. We style them to look the same in all browsers. So we have a unified experience and we get a really good start for our project. So with this done, let's actually include our normalize-css and see what kind of change it makes. So, I'm gonna say link the href. We'll just navigate to normalize-css. We're gonna right click, we're gonna copy the project path here, and we're gonna paste that here. Of course, make sure your path is correct. And now, let's actually do a comparison. So this is before and this after. So you see, we have some different fonts loaded, some different font sizes. But also everything else is brought to a specific standard. So let's actually have a look at our CSS file here. So as you can see, we're setting default on families, we're removing margins from the body. And then we're correcting the block display modes for certain browsers and so on. So as you can see, these are very well commented, so you immediately know what they're doing. And that's it for Normalize. You saw just how big of a difference a reset file can make, so this definitely belongs in an essential CSS kit. Next up we'll have a look at a library that's really useful for creating animations.

Back to the top