CSS Reset

This is possibly the shortest post in history but worthwhile nonetheless.

Before you start your css for a page/site, bung this right at the top of your stylesheet.

* {
    margin:0;
    padding:0;
}

Browsers have default paddings and margins for different elements in your html. The css above removes these defaults from all elements by using the universal selector (*) which means that you start with a level playing field across browsers.

Feed IconFollow me on Twitter





4 Responses to “CSS Reset”

  1. You shouldn’t really use this because it resets everything, when you might want to have some default styling on some element such as heading elements.

    Eric Meyers CSS reset look like it is good.

    Take a look: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

  2. Hi Meshach, how’s it going :)
    A css reset does exactly that; it resets the css and removes browser defaults.
    I want it to reset everything. I then have more control of my page layout instead of leaving it up to the browser to decide.
    I wouldn’t advise leaving default styling on any element that you want to look consistent across browsers. If you want 10px of padding on your h1 tags, apply it manually.
    Eric Meyer’s Css Reset is very good but for simplicity I always use the example above.

  3. Ah. Yes, I suppose you are right.

  4. ElanMan, you should know by now that there is no simplicity in our field. ;.)

Leave a Comment







XHTML: You can use the following tags in your comments: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">