Applying Normalize.css Browser Reset CSS3:05 with Guil Hernandez
In this Quick Tip we'll learn about Normalize.css, a new CSS tool we can use as an alternative to traditional CSS reset methods. Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
[treehouse presents] 0:00 [Normalizing Your CSS IN CSS with Guil Hernandez] 0:02 Hi, I’m Guil from Treehouse. 0:05 In this quick tip, we’ll learn about Normalize.css, 0:07 a new CSS tool we can use as an alternative to traditional CSS reset methods. 0:10 Let’s check it out. 0:15 Most CSS resets provide developers a baseline 0:17 for styling pages by completely removing certain browser style inconsistencies, 0:20 such as margins, padding, line height, and heading font sizes. 0:25 But depending on your project, 0:29 it’s okay to leave in some of those basic default browser styles. 0:31 What Normalize.css does is it preserves useful browser default styles 0:34 instead of removing all default styles from every element. 0:39 It also corrects common bugs like display settings for HTML5 elements, 0:43 font size rendering, and form element styling. 0:47 All HTML elements will render consistently 0:50 and in line with modern web standards. 0:54 You can download Normalize.css at 0:57 necolas.github.com/normalize.css 1:00 or grab the files on GitHub at /necolas/normalize.css. 1:04 So save the file in your project folder, 1:11 then you can link to it from your HTML file 1:13 right above your main style sheet. 1:16 Or you can import it from your main style sheet, and you’re all set. 1:18 There are some advantages to using Normalize.css 1:23 over other CSS reset methods. 1:26 Since it preserves useful default styles, 1:28 there’s no need to overwrite a lot of element styles. 1:31 Headings and paragraphs, for example, 1:33 preserve their default styles consistently across the browsers. 1:35 Another neat feature is that it also makes form elements 1:39 cross-browser consistent and styleable. 1:42 The normalized style sheet is small in size and it’s modular, 1:45 so it makes it easy for us to see exactly 1:49 which elements need specific styles, 1:51 and we can also remove entire sections of the CSS file 1:54 if we do not need them in our project. 1:58 The CSS file also has detailed in-line documentation 2:00 explaining why each rule was added 2:04 and how it affects each browser. 2:07 If you’re using HTML5 Boilerplate from html5boilerplate.com, 2:10 Normalize.css is already included. 2:15 It also has a wide browser support, including mobile browsers. 2:18 Normalize.css is not necessarily a better solution 2:22 over other CSS reset techniques, 2:26 it’s just an alternative method that, 2:29 depending on your project, might be the best fit. 2:31 With other full CSS resets, 2:34 you begin from no styles whatsoever and build up from there. 2:36 Normalize.css lets you start somewhere in the middle 2:40 in a state that’s consistent in all browsers. 2:44 Then you build up or down as you need to. 2:47 If you’ve been using CSS resets for a while, 2:49 give Normalize.css a try. 2:52 You might realize that your site might require less fixes 2:54 for browser compatibility than you thought. 2:57 As with any tool or framework, 2:59 read the documentation first to make sure it’s the right solution for you. 3:01
You need to sign up for Treehouse in order to download course files.Sign up