Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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.
Resources
Other CSS reset methods
User Agent Stylesheets
Many of the modern browser stylesheets are open source. Visit the links below to check them out:
- Chromium UA stylesheet - Google Chrome & Opera
- Mozilla UA stylesheet - Firefox
- WebKit UA stylesheet - Safari
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 it's 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
1:08
designers and developers.
1:11
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 browser's 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 style 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 like Twitter Bootstrap
2:09
and ZURB Foundation.
2:15
You can read more about
the styles it resets
2:17
and the common bugs it fixes
on the normalize website.
2:20
I included the links in the
Teacher's 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 table's 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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up