Using the Reset Stylesheet

Filed in Code 9 comments

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 :)

Posted by Catalin   @   16 July 2011 9 comments
Tags : , , , , ,

Share This Post

RSS Digg Twitter StumbleUpon Delicious Technorati

9 Comments

Comments
Nov 2, 2010
11:42 PM

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,

Nov 9, 2010
3:33 PM

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!

Aug 2, 2011
7:14 PM
#3 Desi :

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

Aug 9, 2011
2:26 PM
#4 hannamay :

You have a nice post here, and a good tutorial too…I’ll hope to hear more from you…

Aug 17, 2011
7:36 AM

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 ;)

Author Aug 17, 2011
10:52 AM
#6 Catalin :

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.

Dec 5, 2011
10:40 AM

Nice Post…. And very Good tutorial also….

Aug 4, 2012
11:39 AM

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

Trackbacks to this post.
Leave a Comment

Previous Post
«
Next Post
»
Luix designed by Video Game Music In conjunction with VPS Hosting , Website Hosting and Shared Hosting.