CSS Reset with Normalize

Before you begin laying out a page with CSS, 0:00 you should consider how a browser's default CSS might affect your layout. 0:02 In the CSS basics course, you learned that a browser has its own built-in stylesheet 0:07 called a User Agent Stylesheet. 0:12 It's the CSS a browser applies to a page before you 0:14 even write a single line of CSS. 0:17 The browser gives elements like the body, headings, 0:19 paragraphs,and lists default margin, padding, line height and font size values. 0:22 Popular web browsers like Chrome, Firefox, Safari and Internet Explorer 0:27 use slightly different default styles in their built-in style sheets. 0:32 So, there will be subtle differences in the way your layout displays 0:35 in the various browsers. 0:38 Default heading, font sizes and form elements for 0:40 example, will look different in some browsers. 0:43 That's why its good practice to use a CSS reset in your website. 0:45 A CSS reset removes the subtle browser inconsistencies in margins, 0:51 padding, line height and font sizes. 0:55 To ensure that your layout displays as consistently as possible 0:57 across all browsers. 1:00 In other words, it helps your site look the same in Chrome, Firefox, 1:02 Safari, IE and Opera. 1:05 Now there are different types of CSS reset methods used by web designers and 1:08 developers. 1:12 In this lesson, I'm going to cover a popular method called normalize.css. 1:13 To follow along using workspaces, launch the workspace on this page. 1:18 If you're starting a website project without the assistance of a grid or 1:22 framework. 1:26 Your website layout usually looks similar to this 1:27 before writing any CSS of your own. 1:29 Notice the color of the links, the different font sizes and 1:32 the space around the body, headings, paragraphs and between lines of text. 1:35 The page is styled to a limited extent by the browsers default style sheet 1:41 to make it appear more readable to users. 1:45 I'm going to use the CSS reset normalize.css 1:48 to remove some of these default browser styles. 1:52 Like the extra margin and padding around the page. 1:55 This will create a level playing field for me to stall the layout and 1:59 help create what's called cross-browser compatibility. 2:03 It's when your layout looks consistent in all the browsers. 2:06 Normalize is the CSS reset method used in CSS frameworks likeTtwitter bootstrap and 2:09 ZURB Foundation. 2:15 You can read more about the styles at resets, 2:17 and the common bugs it fixes on the normalized website. 2:20 I included the links in the teachers notes of this video. 2:24 So adding normalize to your project is easy. 2:27 You simply download the CSS file from the website and link it to your HTML. 2:30 So I'll click the Download button here and 2:35 save the CSS file as normalize.css. 2:38 You should already see a file named normalize.css 2:43 inside the CSS folder of this workspace. 2:48 I'm gonna link this style sheet to the index.html file. 2:52 So right above the link tag that links to the main style sheet, 2:56 I'll add a new link element that links to normalize.css. 3:01 And as the href value, I'll type the path to the style sheet, 3:14 which is css forward slash followed by normalize.css. 3:19 I'm linking the CSS reset above my main CSS file, so that I'm able to override 3:23 any of the normalized resets in my main style sheet, if I need to, later on. 3:30 So the normalized style sheet is small, modular and 3:35 broken down into independent sections. 3:39 So it makes it easy to see which elements need specific styles, 3:42 it's also well documented. 3:46 So you'll know what each reset rule does and why it's doing it. 3:48 And if you don't need certain reset rules in your style sheet, 3:53 you can remove them from the CSS file. 3:56 Now what's great is that we can just as easily add reset rules in the style sheet. 3:59 So for example, I want to remove the margins, 4:05 padding and bullets in every list item of my layout. 4:09 So I'm going to add a custom reset in the normalized.css file. 4:13 So I'll scroll all the way down to the bottom of the style sheet, and 4:18 add some new CSS. 4:23 So first I'll copy this tables comment here and paste it at the bottom. 4:26 And I'll change the text to say Lists, and 4:33 the description will say Remove default 4:37 list styles, margins and padding. 4:41 I’ll add a new rule that targets ordered lists and unordered lists. 4:48 And I’ll set the margin and padding values to 0. 4:56 And the list style value to none, then I'll save my file. 5:02 So now, if we look at this page in every browser, it should look the same. 5:07 Because now we forced browsers to match this reset base line. 5:11 Therefore avoiding subtle cross-browser differences as much as possible. 5:15 So now we're ready to start writing the main layout styles for our webpage. 5:19