FREELessons: 17Length: 2.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.3 Using Normalize.css

Hey, welcome back to Bum-Proof Web Design. So far you have learned a lot about dealing with cross-browser issues and cross-platform issues that can cause functionality to break on you site. But as well as those types of problems between browsers, there are also just small inconsistencies, things like forms rendering slightly differently. And things like HTML5 elements like video players and audio players being just a little bit different from one browser to the next. So this lesson, you're going to learn how to use normalize.css to wipe out a raft of cross-browser inconsistencies with one step. Normalize.css, it's just CSS, but it's CSS that's written with a view to being loaded as the first CSS in your site. So that you create a foundation that normalizes all of the default behaviors of default HTML elements across all browsers. Now it actually does quite a lot of things so we won't go into all of them right now. But if you go to the GitHub repository for normalize.css and you have a look inside the file, there are comments all through that will show you all of the different functions that normalize.css performs. Now you can incorporate normalize.css into your project very easily simply by downloading the normalize.css file and loading it as the first style sheet in your project. However, for efficiency, you're better off having all your CSS in one CSS file. So for that reason and also assuming that you're also going to be using a CSS processor like we talked about in the last video. The best way to incorporate Normalize into your project is to get it in the syntax of the preprocessor you'll be using in your project. Normalize is available in all three preprocessor flavors. You can get, normalize-scss, and normalize.less. I will show you how to import the file into your project. And it's basically the same process for SCSS or LESS if those are the pre-processes you'll be using. We're going to start with just this plain page. We just have default formatting and default text. And when you have applied Normalize successfully, you'll see the fonts will change. There will be a whole lot of other things that will have changed in the background too. But the change in the fonts is what will let you know that you have incorporated Normalize successfully. Once again I'm using Prepros to compile all of my stylus files, and I have downloaded into my stylus subfolder. So here is my main style sheet, and here is That's just normalize.css written in the style of syntax. What I want to do here is prevent from being compiled into it's own separate style sheet, which is the default behavior that Prepros will perform when it detects So click that file and uncheck Auto Compile. Now we are going to open up and import normalize into it. All that is required is just one line of code, import, normalize. And whichever pre-process that you're using, be sure to follow the appropriate import syntax. Now if we save that, Prepros has automatically recompiled the style shape and now if we go back to our web page You can see that there's difference, the default fonts have been changed and the padding that is automatically applied. Or the margin that is automatically applied to a page is gone. What that means is normalize.css has been applied to this page. And even though you can't see a lot of what's actually going on in the background, as you start to flush out your sites more, you'll find that they're automatically standardized across multiple browsers. In the next lesson, you'll learn the advantages of one of the most valuable cross-compatible web design techniques. And that is never setting a fixed-based font size.

Back to the top