- [Voiceover] One of the terms
that you'll probably come across
from time to time, as you become
more familiar with CSS is the term CSS Reset.
A CSS Reset is simply the term used to describe
a collection of styles that designers use
to deal with the browsers default style sheets.
As we discussed a little earlier,
all browsers have a default style sheet
that will be applied to the page,
if they're not overwritten by the author's styles.
Using a CSS Reset, a designer can essentially
nullify those styles, and start from scratch
without having to worry about what effect
the browser's default styles might have
on their own designs.
For the most part, there are a couple
of basic properties that most CSS Resets
establish a baseline for.
Those are margins, padding, borders,
font-size, and line-height.
Now, I said for the most part,
because there are many different
variations of CSS Resets out there,
and some of them are considerably
more complex than others.
To use a reset, you simply add your baseline
styles to the top of your main style sheet.
It's important that these styles
are the first styles your browsers encounter,
as you want to reset the values site-wide,
and then go back over them, and overwrite them
with the site's specific styles.
If the reset styles are added
below the site's custom styles,
all your hard work is undone,
and the reset values become the site's styling.
As a way of introducing you to CSS Resets,
I want to show you Eric Meyer's
popular Reset CSS file.
And I'm gonna do that by going to
his site, meyerweb.com, and you could do
an article search if you wanted to
for Reset Revisted, and you'll find
the latest version of it.
Now Eric was one of the first developers
to work on CSS Resets, and many designers,
developers, and systems have adopted his
approach over the years and even used his file.
Now, rather than go through this code
line-by-line and bore you to tears,
I'd rather just discuss what each section is doing,
as a way of building a bigger picture
about what exactly a CSS Reset does.
I'm just gonna scroll down a little bit here,
so I can get a little bit more into the code.
Okay. So this first really, really big block of code here
takes most of the common HTML elements
and resets their padding, margin, and border to zero,
essentially eliminating any of those
browser default values.
It's also gonna set the font-size to 100%,
and it ensures cross-browser stability
with font settings and baseline alignments.
From there, it goes on to ensure block-level display
for newer HTML5 elements, gives a consistent
value for line height, and then goes ahead
and removes those stylings from lists.
Now, as you can see below this, there's
actually a little bit more than just that going on here,
but by now I think you get the idea.
Now, flip-side of this, of course,
is that if you remove the default styling
of an element, you have to remember
to put your own styling back.
If you eliminate the default margins on paragraphs
for example, you have to remember
to give them a value later on in your styles,
or all your paragraphs won't have any
spacing between them at all.
Now that's one of the reasons that some designers
are critical of using CSS Resets.
If you planned on setting your own margins
for paragraphs in your styles,
you're essentially doing the work twice
by resetting the value to zero,
and then setting it again to the desired value.
CSS Resets can also cause the browser
to do a lot of work.
Depending upon the complexity of the reset,
you could be asking the browser
to go through and style every single element,
before even beginning to apply the site's actual styling.
This can add a lot of overhead to your sites
for a minimal amount of value on occasion.
Now, other designers love the fact that
a CSS Reset gives them a consistent baseline
to build sites from.
And instead of having to remember
which items they need to overwrite for a site,
and which they don't, going ahead
and using a reset consistently when designing sites,
means that you know exactly where
you're starting from every single time,
and there's a lot of value in that.
Should you use a reset or not?
Honestly, there's simply a personal preference
that depends on how you as a designer like to work.
In fact, the need for a CSS Reset can even vary
from one project to the next.
Eric Meyer even says, in the introduction
to his reset, that it's not designed to be used as is,
that it should be altered and customized
to meet the needs of the designer, or the project.
Unfortunately, I'll be honest with you here,
designers have gotten into the habit of just
copying and pasting CSS Resets into their styles.
Now, this approach may give them default
baseline to work from, but in my opinion
it actually creates more work for them in the long run.
By exploring the styling needs of a site carefully,
and then planning for how a reset can benefit
that site, a designer can take a standard reset
and tweak it so that the reset is
efficiently setting default styling for that project.
My own personal approach to using resets,
is actually a really minimal one.
I simply prefer to zero out default values
for elements that I know I'm gonna use in the site,
and I don't have a set reset that I use
for every single project.
I have, simply, just a guiding principle
to use smaller, efficient resets if I need them at all.
Now if you want to learn more about CSS Resets,
I recommend checking out cssreset.com
This is an awesome resource that
explains a little bit about what a CSS Reset is,
and how to determine if you need one,
and it provides you with the links
to some of the more popular CSS Resets in use today.
You notice Eric Meyer's reset's there,
there's the YUI CSS, and a lot more of them.
Now if you read the documentation for these resets,
and go ahead and explore the code that's provided,
you'll gain a greater appreciation
for dealing with browser default styles,
when it's appropriate to use these resets,
and where the use of a CSS Reset
fits into your own design philosophy.