Before you begin laying out a page with CSS,

you should consider how a browser's default CSS might affect your layout.

In the CSS basics course, you learned that a browser has its own built-in stylesheet

called a User Agent Stylesheet.

It's the CSS a browser applies to a page before you

even write a single line of CSS.

The browser gives elements like the body, headings,

paragraphs,and lists default margin, padding, line height and font size values.

Popular web browsers like Chrome, Firefox, Safari and Internet Explorer

use slightly different default styles in their built-in style sheets.

So, there will be subtle differences in the way your layout displays

in the various browsers.

Default heading, font sizes and form elements for

example, will look different in some browsers.

That's why its good practice to use a CSS reset in your website.

A CSS reset removes the subtle browser inconsistencies in margins,

padding, line height and font sizes.

To ensure that your layout displays as consistently as possible

across all browsers.

In other words, it helps your site look the same in Chrome, Firefox,

Safari, IE and Opera.

Now there are different types of CSS reset methods used by web designers and

developers.

In this lesson, I'm going to cover a popular method called normalize.css.

To follow along using workspaces, launch the workspace on this page.

If you're starting a website project without the assistance of a grid or

framework.

Your website layout usually looks similar to this

before writing any CSS of your own.

Notice the color of the links, the different font sizes and

the space around the body, headings, paragraphs and between lines of text.

The page is styled to a limited extent by the browsers default style sheet

to make it appear more readable to users.

I'm going to use the CSS reset normalize.css

to remove some of these default browser styles.

Like the extra margin and padding around the page.

This will create a level playing field for me to stall the layout and

help create what's called cross-browser compatibility.

It's when your layout looks consistent in all the browsers.

Normalize is the CSS reset method used in CSS frameworks likeTtwitter bootstrap and

ZURB Foundation.

You can read more about the styles at resets,

and the common bugs it fixes on the normalized website.

I included the links in the teachers notes of this video.

So adding normalize to your project is easy.

You simply download the CSS file from the website and link it to your HTML.

So I'll click the Download button here and

save the CSS file as normalize.css.

You should already see a file named normalize.css

inside the CSS folder of this workspace.

I'm gonna link this style sheet to the index.html file.

So right above the link tag that links to the main style sheet,

I'll add a new link element that links to normalize.css.

And as the href value, I'll type the path to the style sheet,

which is css forward slash followed by normalize.css.

I'm linking the CSS reset above my main CSS file, so that I'm able to override

any of the normalized resets in my main style sheet, if I need to, later on.

So the normalized style sheet is small, modular and

broken down into independent sections.

So it makes it easy to see which elements need specific styles,

it's also well documented.

So you'll know what each reset rule does and why it's doing it.

And if you don't need certain reset rules in your style sheet,

you can remove them from the CSS file.

Now what's great is that we can just as easily add reset rules in the style sheet.

So for example, I want to remove the margins,

padding and bullets in every list item of my layout.

So I'm going to add a custom reset in the normalized.css file.

So I'll scroll all the way down to the bottom of the style sheet, and

add some new CSS.

So first I'll copy this tables comment here and paste it at the bottom.

And I'll change the text to say Lists, and

the description will say Remove default

list styles, margins and padding.

I’ll add a new rule that targets ordered lists and unordered lists.

And I’ll set the margin and padding values to 0.

And the list style value to none, then I'll save my file.

So now, if we look at this page in every browser, it should look the same.

Because now we forced browsers to match this reset base line.

Therefore avoiding subtle cross-browser differences as much as possible.

So now we're ready to start writing the main layout styles for our webpage.