Using the Reset Stylesheet

This is certainly one thing a web designer can’t live without, it has been here for years and many developers have even built their own customized reset stylesheets. Though don’t be surprised, there are developers who still haven’t heard of this technique or haven’t found a use for it.

The most common issues we’ve been facing from the start were cross-browser design inconsistencies and that’s because each browser has a default style for all HTML elements.

The usual differences from a browser to another is the different padding, margin or size of some HTML elements (i.e. heading elements, line-height, lists etc), but here’s where we kick in, by resetting the default styles and give all elements our own default values, guiding browsers to display our designs precisely the way we want.

It’s no use to reinvent the wheel here by brainstorming a good reset stylesheet, a lot of contributors out there have already made available to us some great solutions.
The most common and most used reset stylesheets are used from Eric Meyer’s solution, you can view it here, and another one would be from Yahoo’s YUI Reset CSS.

Be aware, once you use one of the above reset stylesheets, you have to either modify them to suit your project’s needs or overwrite them with another stylesheet where you start styling all that’s elementary for your project.
For example, once you use one of the above, all headings have the same font-size, all elements have their margin and padding reduced to 0px, background is set to #FFFFFF (white) and so on.

If you haven’t played with a reset stylesheet until now, then all I can suggest is for you to start playing with it until you get a better understanding of its effectiveness and you’ll also realize that over 90% of your browser inconsistencies will go away :)

Catalin

My name is Cătălin Berța and I'm a front-end web developer. I was born in Focsani, Romania and currently living in Bucharest. Started playing with some good old html tables ever since 2004 as a hobby, turned out to be a full-time career! :) I've had the chances to experience and witness web development's rapid growth over the years where I've mainly focused on front-end web technologies.

9 thoughts on “Using the Reset Stylesheet

  1. i think once you use one of the reset styles sheet, all headings have the same font-size, all elements have their margin and padding reduced to 0px,

  2. Wonderful blog! I truly love how it? s easy on my eyes as well as the data are well written. I am wondering how I can be notified whenever a new post has been made. I have subscribed to your rss feed which need to do the trick! Have a nice day!

  3. good tutorial :)
    thanks for this I’ve bookmarked this page and have a feeling I’ll be returning to it often.

  4. Hey, nice article! I love using reset stylesheets, they give me back the control over my code and design. A other concept is the “normalize.css”, i dont know if you had heared about it. It just changes a few styles for every browser so that ever browser uses the same standarts, if you want to lear more about that just visit this site: http://necolas.github.com/normalize.css/ or our website: http://www.kolibri.com.mx (for spanish speaking users)

    P.S. It seems like your comments doesnt work really well.. Im not sure if i had wrote this comment more than 2 times 😉

    1. Thanks for the feedback.
      normalize.css does look interesting at a first glance, but before I pronounce myself or recommend it for that matter, I’ll have to check it in details.

  5. I am a new developer of html . this cortical gave me a lot of knowledge. I really learnt much than my expectations.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">