CSS Reset

16 February 2009| 2 Comments| Print

It’s a good idea at the start of writing your CSS code to reset the CSS across all browsers to ensure that your page renders more or less the same. By default different web browsers use different values for margins, padding, or line heights. A CSS reset script will ensure that most browsers will render your site identically, without the need to individually bug fix incorrect CSS properties.


# html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
# pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

Separate your style sheets

IE6 is like a bad word in the web design world simply because the browser is outdated and not up with todays web standards, however it’s here to stay for a while yet due to many corporate companies refusing to upgrade to IE7. Its a good idea to separate your style sheets and put your IE6 and 7 CSS work arounds in different style sheets, you can then use a simple ‘if’ statement to target the relevant browser like below.

<!--[if IE 7]><link rel="stylesheet" type="text/css" href="IE7styles.css" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="IE6styles.css" /><![endif]-->

Share:
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • StumbleUpon
  • Google Bookmarks
  • DZone
  • Reddit
  • Netvibes

2 Comments

  • Jesper Rimmer

    Is there any difference between your CSS-reset above and just typing the following:

    * {margin:0; padding; 0}

    Thanks..

  • Ashley

    Hi Jesper,

    It’s not good practice to use the *{margin:0; padding:0} method. as it’s very heavy on the browser rendering agent to apply rules to every single element in the document, especially with large web pages, and this can also destroy a lot of good default styling, especially when you want to have default style submit buttons, text areas and inputs etc.

Leave a comment...

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled site. To get your own globally-recognized-avatar, register at Gravatar.

Your Ad Here