Use normalize CSS, not reset CSS
Some html elements have different default styles in different browsers and to complicate it further, they can use different properties for similar results. Padding and margin are two properties with this characteristic and f.ex. unordered lists suffer from this complexity. By adding a little padding, one browser may improve the presentation while it is completely borked in another browser.
A well known trick for avoiding browser differences on elements like lists and forms is to use a reset stylesheet. The idea behind reset stylesheets is to remove browser inconsistencies and among other things, they normally set padding and margin on all elements to 0, font-weight to normal, and font-size to 1em.
*{
font-size: 1.0em;
font-weight: normal;
margin: 0px:
padding: 0px;
}
Let us take a look at how a defintion list is presented with and without this simple reset. First with 0 padding and margin.
- Definition term
- Definition description
- Another term
- Another description
And then with default style for this website.
- Definition term
- Definition description
- Another term
- Another description
So we solved one problem and created another. The 0-ed definition list is practically unusable. Browsers apply default styles so html elements are presented in a sensible way and by resetting styles that effort is effectively sabotaged. Many html elements will now be presented in an unreadable way until you rebuild their CSS, thus wasting time on reproducing perfectly good default css. Elements affected by this include all kinds of lists, fieldsets and forms.
Normalize stylesheets
I am not the first person to dislike reset stylesheets and of course, someone has come up with a better way to achieve the goal of the reset stylesheet. Enter normalize stylesheets. These try to remove browser inconsistensies but still maintain a useful default styling.
It is not uncommon to throw in a normalize stylesheet and then start your own styling in a separate stylesheet. However, a normalize stylesheet is just intended as a starting point, so I recommend to use the normalize stylesheet and edit whatever is in there to suit the website you are building. This will result in less code as long and as you don't delete properties in the normalize css, its' goal of browser concistency will not be compromised.
And as support of my normalize vs. reset stylesheet conclusion I offer a simple html page unstyled, styled with a reset stylesheet and then with a normalize stylesheet.
- Plain html page, no CSS.
- Reset html page, reset CSS from YUI (Yahoo)
- Normalized html page, Normalize css from necolas (at github)
I have just implemented Normalize.css for the first time, whereas all previously to this I used Eric Meyer’s CSS Reset template. I understand its purported value, however none of my html elements have been “reset” – H1s are still giant and bold, with default margins set, etc. Am I missing something? I have normalize.css implemented, and then I have overridden its default values to once again remove the margins on H#’s, make all text have line-height: 1, etc. Is that what you’re supposed to do? Implement Normalize and then go and individually “reset” the elements that you need to be reset?
Thank you for your comment. If we use H1 as an example, it is intended to be giant and bold after you have implemented normalize.css because that is the typical browser default for an H1. Normalize.css does not intend to do any design decisions, it just supplies a base free from browser inconsistensies. What you should do then is to adjust the font-size/margin etc. in normalize.css for H1 to the result you want to end up with. While that might not be as big and bold as normalize.css’s default I guess it will be bigger and with more spacing than normal text.
The current normalize.css has font-size: 2em;. So replace this value with f.ex. 1.5em and add font-weight: normal; if you don’t want it to be bold. And then add declarations for the other h# elements so they appear a little smaller than h1.
I think you have the right idea, but think that you should adjust normalize.css, not reset.