Applying Normalize.css Browser Reset CSS

[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 set up Workspace

Sign up