HTML and CSS Reference
In-Depth Information
CSS RESETS
AND
NORMALIZE.CSS
Many people favor the use of CSS resets in their work to get rid of the annoying
differences between browser default styles. Such pieces of style are usually only tiny
but still annoying when trying to get CSS layouts to work consistently. And some
are not so tiny; for example, the differences between default form styling across
browsers or margins and padding on the
<html>
and
<body>
elements, which you
inevitably need to remove to get rid of unsightly spacing on the outside of your page.
CSS resets have traditionally been the answer to these style issues. CSS resets
remove most or all default CSS styling, leaving you to add your own styles and be
confident that you are much less likely to get weird behavior between browsers.
However, they are not perfect. CSS resets tend to be overzealous, removing
every default style and leaving you with more work to add a lot of necessary styles
back in. In addition, they inevitably clutter your styles: You can hide them in an
external stylesheet, but you'll still see loads of crazy declarations when it comes
to debugging your CSS using a debugging tool.
A much better option is to use normalize.css, which was written by Nicolas
Gallagher (
http://nicolasgallagher.com/about-normalize-css).
Instead of removing
everything, normalize.css makes default styles more consistent across browsers,
fixes bugs, and makes subtle improvements.
You simply download the file from
https://github.com/necolas/normalize.css,
attach it to your page, and voilà! For those interested in learning more, the About
page referenced previously and the CSS file contain extensive comments and
examples.
I've included this file in the template, and it is used in most of the examples
in this topic.
