CINXE.COM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" dir="ltr" lang="en-US"> <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("http://bavotasan.com/tutorials/using-css-resets/","20101120000218","https://web.archive.org/","web","/_static/", "1290211338"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="googlebot" content="index,archive,follow,noodp"/> <meta name="robots" content="all,index,follow"/> <meta name="msnbot" content="all,index,follow"/> <meta name="description" content="Before you start building a new site, one important decision you need to make is whether or not you want certain elements of your design to rely on the def..."/> <meta name="keywords" content="css,design,dev,html,Stylesheet,web,website,"/> <title>Using CSS Resets | bavotasan.com</title> <link rel="stylesheet" href="https://web.archive.org/web/20101120000218cs_/http://bavotasan.com/wp-content/themes/bavotasan-2010/style.css?ver=1.0.8" type="text/css" media="screen"/> <link rel="shortcut icon" href="https://web.archive.org/web/20101120000218im_/http://bavotasan.com/favicon.ico"/> <link rel="pingback" href="http://bavotasan.com/xmlrpc.php"/> <link rel="alternate" type="application/rss+xml" title="bavotasan.com 禄 Feed" href="https://web.archive.org/web/20101120000218/http://bavotasan.com/feed/"/> <link rel="alternate" type="application/rss+xml" title="bavotasan.com 禄 Comments Feed" href="https://web.archive.org/web/20101120000218/http://bavotasan.com/comments/feed/"/> <link rel="alternate" type="application/rss+xml" title="bavotasan.com 禄 Using CSS Resets Comments Feed" href="https://web.archive.org/web/20101120000218/http://bavotasan.com/tutorials/using-css-resets/feed/"/> <script type="text/javascript" src="https://web.archive.org/web/20101120000218js_/http://bavotasan.com/wp-includes/js/jquery/jquery.js?ver=1.4.2"></script> <link rel="index" title="bavotasan.com" href="http://bavotasan.com/"/> <link rel="start" title="Removing Images from a WordPress Post: Redux" href="http://bavotasan.com/tutorials/removing-images-from-a-wordpress-post/"/> <link rel="prev" title="A Sleek Navigation Menu with CSS3" href="https://web.archive.org/web/20101120000218/http://bavotasan.com/tutorials/a-sleek-navigation-menu-with-css3/"/> <link rel="next" title="Turning On PHP Errors" href="https://web.archive.org/web/20101120000218/http://bavotasan.com/tutorials/turning-on-php-errors/"/> <link rel="canonical" href="https://web.archive.org/web/20101120000218/http://bavotasan.com/tutorials/using-css-resets/"/> <link rel="shortlink" href="https://web.archive.org/web/20101120000218/http://bit.ly/9wWiht"/> <script type="text/javascript" src="https://web.archive.org/web/20101120000218js_/http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script> <meta property="fb:page_id" content="137456822940271"/> <meta property="fb:admins" content="586505548"/> <meta property="og:site_name" content="bavotasan.com"/> <meta property="og:title" content="Using CSS Resets"/> <meta property="og:description" content="Before you start building a new site, one important decision you need to make is whether or not you want certain elements of your design to rely on the default settings of your user鈥檚 browser. The problem with this is that not all browsers use the same default settings. A perfect example is with the [...]"/> <meta property="og:type" content="article"/> <meta property="og:image" content="https://web.archive.org/web/20101120000218im_/http://bavotasan.com/wp-content/uploads/2010/10/cssreset.jpg"/> </head> <body class="single single-post postid-2908"> <div id="bodywrap">  <script type="text/javascript"> (function(){ var bsa = document.createElement('script'); bsa.type = 'text/javascript'; bsa.async = true; bsa.src = '//web.archive.org/web/20101120000218/http://s3.buysellads.com/ac/bsa.js'; (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa); })(); </script>   <div id="header"> <div id="topmenu" class="menu-top-menu-container"><ul id="menu-top-menu" class="menu"><li id="menu-item-2254" class="menu-item menu-item-type-custom menu-item-2254"><a href="https://web.archive.org/web/20101120000218/http://themes.bavotasan.com/">Themes by bavotasan.com</a></li> <li id="menu-item-2255" class="menu-item menu-item-type-custom menu-item-2255"><a href="https://web.archive.org/web/20101120000218/http://themes.bavotasan.com/support/">Support Forum</a></li> <li id="menu-item-2259" class="menu-item menu-item-type-custom menu-item-2259"><a href="https://web.archive.org/web/20101120000218/http://themes.bavotasan.com/affiliates">Affiliates</a></li> <li id="menu-item-2256" class="menu-item menu-item-type-post_type menu-item-2256"><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/about/">About</a></li> <li id="menu-item-2257" class="menu-item menu-item-type-post_type menu-item-2257"><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/services/">Services</a></li> <li id="menu-item-2258" class="menu-item menu-item-type-post_type menu-item-2258"><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/contact/">Contact</a></li> </ul></div> <div id="title"> <a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/"> <img src="https://web.archive.org/web/20101120000218im_/http://bavotasan.com/wp-content/themes/bavotasan-2010/images/bavotasan.png" alt="bavotasan.com" width="400" height="70"/> <span id="desc"></span></a> </div> <div id="follow"> <span></span> <a href="https://web.archive.org/web/20101120000218/http://twitter.com/bavotasan" class="twitter"></a> <a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/feed/" class="rss"></a> </div> <div id="navigation" class="menu-main-menu-container"> <ul id="menu-main-menu" class="menu"> <li id="menu-item-2264"><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/"><span></span>Home</a></li> <li id="menu-item-2266"><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/category/articles/"><span></span>Articles</a></li> <li id="menu-item-2265" class="current-menu-item"><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/category/tutorials/"><span></span>Tutorials</a></li> <li id="menu-item-2267"><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/category/downloads/"><span></span>Downloads</a></li> </ul> </div> </div>  <div id="mainwrapper"> <div id="leftcontent"> <div class="posttop"> <div class="thedate"><div class="month">Oct</div><div class="day">12</div><div class="year">2010</div></div> <h1>Using CSS Resets</h1> <br class="clear"/> <p><img src="https://web.archive.org/web/20101120000218im_/http://bavotasan.com/wp-content/uploads/2010/10/cssreset.jpg" alt="CSS" title="cssreset" width="200" height="150" class="alignright size-full wp-image-2910"/>Before you start building a new site, one important decision you need to make is whether or not you want certain elements of your design to rely on the default settings of your user’s browser. The problem with this is that not all browsers use the same default settings. A perfect example is with the header tags. The default font size for the h1 tag in IE is 24px, while most other browsers set it at 32px. The margins can range anywhere from about 14px to 20px. That’s a big difference that can throw your design off quite a bit.</p> <p>The way to get around this is to use a CSS reset. A CSS reset does exactly what it states, it resets your CSS so that you can then style your elements exactly how you want, without having to worry about any default settings screwing things up.</p> <p>If you do a quick Google search for CSS reset, the first result will be <a href="https://web.archive.org/web/20101120000218/http://meyerweb.com/eric/tools/css/reset/">Eric Meyer’s Reset CSS Tool</a>. This is the one that I like to use. All you need to do is add this to the top of your style sheet.</p> <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="css" style="font-family:monospace;">html<span style="color: #00AA00;">,</span> body<span style="color: #00AA00;">,</span> div<span style="color: #00AA00;">,</span> span<span style="color: #00AA00;">,</span> applet<span style="color: #00AA00;">,</span> object<span style="color: #00AA00;">,</span> iframe<span style="color: #00AA00;">,</span> h1<span style="color: #00AA00;">,</span> h2<span style="color: #00AA00;">,</span> h3<span style="color: #00AA00;">,</span> h4<span style="color: #00AA00;">,</span> h5<span style="color: #00AA00;">,</span> h6<span style="color: #00AA00;">,</span> p<span style="color: #00AA00;">,</span> blockquote<span style="color: #00AA00;">,</span> pre<span style="color: #00AA00;">,</span> a<span style="color: #00AA00;">,</span> abbr<span style="color: #00AA00;">,</span> acronym<span style="color: #00AA00;">,</span> address<span style="color: #00AA00;">,</span> big<span style="color: #00AA00;">,</span> cite<span style="color: #00AA00;">,</span> code<span style="color: #00AA00;">,</span> del<span style="color: #00AA00;">,</span> dfn<span style="color: #00AA00;">,</span> em<span style="color: #00AA00;">,</span> <span style="color: #000000; font-weight: bold;">font</span><span style="color: #00AA00;">,</span> img<span style="color: #00AA00;">,</span> ins<span style="color: #00AA00;">,</span> kbd<span style="color: #00AA00;">,</span> q<span style="color: #00AA00;">,</span> s<span style="color: #00AA00;">,</span> samp<span style="color: #00AA00;">,</span> small<span style="color: #00AA00;">,</span> strike<span style="color: #00AA00;">,</span> strong<span style="color: #00AA00;">,</span> sub<span style="color: #00AA00;">,</span> sup<span style="color: #00AA00;">,</span> tt<span style="color: #00AA00;">,</span> var<span style="color: #00AA00;">,</span> b<span style="color: #00AA00;">,</span> u<span style="color: #00AA00;">,</span> i<span style="color: #00AA00;">,</span> <span style="color: #993333;">center</span><span style="color: #00AA00;">,</span> dl<span style="color: #00AA00;">,</span> dt<span style="color: #00AA00;">,</span> dd<span style="color: #00AA00;">,</span> ol<span style="color: #00AA00;">,</span> ul<span style="color: #00AA00;">,</span> li<span style="color: #00AA00;">,</span> fieldset<span style="color: #00AA00;">,</span> form<span style="color: #00AA00;">,</span> label<span style="color: #00AA00;">,</span> legend<span style="color: #00AA00;">,</span> table<span style="color: #00AA00;">,</span> caption<span style="color: #00AA00;">,</span> tbody<span style="color: #00AA00;">,</span> tfoot<span style="color: #00AA00;">,</span> thead<span style="color: #00AA00;">,</span> tr<span style="color: #00AA00;">,</span> th<span style="color: #00AA00;">,</span> td <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">outline</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;"><span style="color: #cc66cc;">100</span>%</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">vertical-align</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">baseline</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">transparent</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span> body <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">line-height</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">1</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span> ol<span style="color: #00AA00;">,</span> ul <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">list-style</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">none</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span> blockquote<span style="color: #00AA00;">,</span> q <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">quotes</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">none</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span> blockquote<span style="color: #3333ff;">:before</span><span style="color: #00AA00;">,</span> blockquote<span style="color: #3333ff;">:after</span><span style="color: #00AA00;">,</span> q<span style="color: #3333ff;">:before</span><span style="color: #00AA00;">,</span> q<span style="color: #3333ff;">:after </span><span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">content</span><span style="color: #00AA00;">:</span> <span style="color: #ff0000;">''</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">content</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">none</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span>   <span style="color: #808080; font-style: italic;">/* remember to define focus styles! */</span> <span style="color: #3333ff;">:focus </span><span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">outline</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span>   <span style="color: #808080; font-style: italic;">/* remember to highlight inserts somehow! */</span> ins <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">text-decoration</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">none</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span> del <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">text-decoration</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">line-through</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span>   <span style="color: #808080; font-style: italic;">/* tables still need 'cellspacing="0"' in the markup */</span> table <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">border-collapse</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">collapse</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">border-spacing</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span></pre></div></td></tr></table></div> <p>The one thing you need to remember when using a CSS reset, is that it resets everything. So now your paragraph tags won’t have any margins, nor will your unordered lists and so on. That means you need to start setting some styles for these elements.</p> <p>Here is what I like to add immediately after the reset to get things started.</p> <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="css" style="font-family:monospace;">h1<span style="color: #00AA00;">,</span> h2<span style="color: #00AA00;">,</span> h3<span style="color: #00AA00;">,</span> h4<span style="color: #00AA00;">,</span> h5<span style="color: #00AA00;">,</span> h6<span style="color: #00AA00;">,</span> p <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #933;">12px</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span> ul<span style="color: #00AA00;">,</span> ol <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">20px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">list-style</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">disc</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span> ol <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">list-style</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">decimal</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span> h1 <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">32px</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span> h2 <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">24px</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span> h3 <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">20px</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span> h4 <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">16px</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span></pre></div></td></tr></table></div> <p>That sets up most of the common tags that I use. Some things might look strange as you start to put together your site, so just remember that now you need to set all the default CSS for any element you use.</p> <p>Another popular reset is <a href="https://web.archive.org/web/20101120000218/http://www.yahooapis.com/yui/3/cssreset/">YUI Reset CSS by Yahoo</a>. It does things a little bit differently. Take a look at the <a href="https://web.archive.org/web/20101120000218/http://www.yahooapis.com/yui/3/cssreset/">YUI homepage</a> to see some examples of how it is used and you may decide that this reset is the right one for you.</p> <p>The reset I have seen used the most on other people’s sites is the Global Reset. I don’t like to use it because it pretty much just resets the margin and padding for every element but that might be all you really want.</p> <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #00AA00;">*</span> <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span></pre></div></td></tr></table></div> <p>Whichever reset you choose is totally up to you, but you should consider including a reset as your starting point when creating the stylesheet for your site to guarantee your design looks the way you intended it to across all browsers.</p> <div class="buttonbox"> </div> </div> <div class="post"> <div class="socialleft">If you liked this, please share it.</div> <ul class="addtoany_list"> <li><a href="https://web.archive.org/web/20101120000218/http://twitter.com/share?url=http%3A%2F%2Fbit.ly%2F9wWiht&counturl=http://bavotasan.com/tutorials/using-css-resets/" class="twitter-share-button" data-count="vertical" data-via="bavotasan">Tweet</a><script type="text/javascript" src="https://web.archive.org/web/20101120000218js_/http://platform.twitter.com/widgets.js"></script></li> <li><a href="https://web.archive.org/web/20101120000218/http://www.facebook.com/sharer.php?u=http://bavotasan.com/tutorials/using-css-resets/&t=Using CSS Resets" title="Click to send this page to Facebook!" target="_blank" rel="nofollow" class="facebook-icon"></a></li> <li><a href="https://web.archive.org/web/20101120000218/http://digg.com/submit?phase=2&url=http://bavotasan.com/tutorials/using-css-resets/&title=Using CSS Resets&bodytext=Before you start building a new site, one important decision you need to make is whether or not you want certain elements of your design to rely on the default settings of your user鈥檚 browser. The problem with this is that not all browsers use the same default settings. A perfect example is with the [...]" title="Digg" rel="nofollow" target="_blank" class="digg-icon"></a></li> <li><a href="https://web.archive.org/web/20101120000218/http://www.delicious.com/save" onclick="window.open('https://web.archive.org/web/20101120000218/http://www.delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent('https://web.archive.org/web/20101120000218/http://bavotasan.com/tutorials/using-css-resets/')+'&title='+encodeURIComponent('Using CSS Resets'),'delicious', 'toolbar=no,width=550,height=550'); return false;" class="delicious-icon"></a></li> <li><a href="https://web.archive.org/web/20101120000218/http://www.stumbleupon.com/submit?url=http://bavotasan.com/tutorials/using-css-resets/&title=Using CSS Resets" title="StumbleUpon" rel="nofollow" target="_blank" class="stumbleupon-icon"></a></li> <li><iframe src="https://web.archive.org/web/20101120000218if_/http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fbavotasan.com%2Ftutorials%2Fusing-css-resets%2F&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowtransparency="true"></iframe></li> </ul> </div> <div class="post"> <p class="tags">Tags: <a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/tag/css/" rel="tag">css</a>, <a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/tag/design/" rel="tag">design</a>, <a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/tag/dev/" rel="tag">dev</a>, <a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/tag/html/" rel="tag">html</a>, <a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/tag/stylesheet/" rel="tag">Stylesheet</a>, <a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/tag/web/" rel="tag">web</a>, <a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/tag/website/" rel="tag">website</a></p> <p class="tags">Short URL: <a href="https://web.archive.org/web/20101120000218/http://bit.ly/9wWiht" title="Using CSS Resets">http://bit.ly/9wWiht</a></p> </div> <div class="post"> <div id="crp_related"> <h3>Similar Posts</h3> <ul> <li><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/tutorials/a-sleek-navigation-menu-with-css3/" rel="bookmark" title="Permanent Link to A Sleek Navigation Menu with CSS3">A Sleek Navigation Menu with CSS3</a></li> <li><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/tutorials/text-rotation-css3/" rel="bookmark" title="Permanent Link to Text Rotation with CSS3">Text Rotation with CSS3</a></li> <li><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/tutorials/developing-themes-for-wordpress-part-1/" rel="bookmark" title="Permanent Link to Developing Themes for WordPress: Part 1">Developing Themes for WordPress: Part 1</a></li> <li><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/tutorials/optimization-tips-speed-up-site/" rel="bookmark" title="Permanent Link to Optimization Tips to Speed Up Your Site">Optimization Tips to Speed Up Your Site</a></li> <li><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/tutorials/draw-smiley-face-css3/" rel="bookmark" title="Permanent Link to How to Draw a Smiley Face with CSS3">How to Draw a Smiley Face with CSS3</a></li> </ul> </div> <a href="https://web.archive.org/web/20101120000218/http://www.netfirms.com/web-hosting/web-hosting-business/?a_aid=4c8bb52b19602&a_bid=8f049e07" target="_top" style="float:right;"><img src="https://web.archive.org/web/20101120000218im_/http://www.webhostrevenue.com/accounts/default1/banners/300x250-us.gif" alt="Netfirms Business Hosting Plan" title="Netfirms Business Hosting Plan" width="250" height="208"/></a><img style="border:0" src="https://web.archive.org/web/20101120000218im_/http://www.webhostrevenue.com/scripts/imp.php?a_aid=4c8bb52b19602&a_bid=8f049e07" width="1" height="1" alt=""/> </div> <div class="post"> <a href="#comment_list"></a> <div id="comments"> <h3 id="comments-title">Discussion <small> 4 Comments</small> </h3> <ol class="commentlist"> <li class="comment even thread-even depth-1" id="li-comment-16396"> <div id="comment-16396"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101120000218im_/http://0.gravatar.com/avatar/0d66c8bf6b3b2ec9b0653b44f9858ce4?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101120000218/http://thisismyurl.com/" rel="external " class="url">Christopher Ross</a></span> <span class="commentdate"> on October 12, 2010 at 3:35 pm</span> </div> <div class="comment-text"> <p>Chris, thanks for posting this. The CSS reset framework is a great asset for any developer!</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101120000218/http://bavotasan.com/tutorials/using-css-resets/?replytocom=16396#respond" onclick="return addComment.moveForm("comment-16396", "16396", "respond", "2908")">Reply</a> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-16411"> <div id="comment-16411"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101120000218im_/http://1.gravatar.com/avatar/f9878806bd68f1614870fe89a7328fde?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101120000218/http://katalog.wyrusz.pl/" rel="external " class="url">covalic</a></span> <span class="commentdate"> on October 13, 2010 at 5:09 pm</span> </div> <div class="comment-text"> <p>Great work, nice article and ofcourse FB ‘I like’ <img src="https://web.archive.org/web/20101120000218im_/http://bavotasan.com/wp-includes/images/smilies/icon_biggrin.gif" alt=":D" class="wp-smiley"/> </p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101120000218/http://bavotasan.com/tutorials/using-css-resets/?replytocom=16411#respond" onclick="return addComment.moveForm("comment-16411", "16411", "respond", "2908")">Reply</a> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-16577"> <div id="comment-16577"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101120000218im_/http://1.gravatar.com/avatar/d7d9238a57862a97a9d26c3bee80c233?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101120000218/http://www.web-studio.co.uk/" rel="external " class="url">Web design Milton Keynes</a></span> <span class="commentdate"> on November 3, 2010 at 12:57 pm</span> </div> <div class="comment-text"> <p>I use the global reset on a lot of sites but you are quite right. It inflates my code as I have to indivdually put padding and margins all over the place. I mainly used it to combat the firefox/internet explorer issue with padding and margins. I’ll try the Eric Meyers Reset.<br/> On the flip side I quite like to be in control of every element!!</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101120000218/http://bavotasan.com/tutorials/using-css-resets/?replytocom=16577#respond" onclick="return addComment.moveForm("comment-16577", "16577", "respond", "2908")">Reply</a> </div> </div> <ul class="children"> <li class="comment byuser bypostauthor odd alt depth-2" id="li-comment-16608"> <div id="comment-16608"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101120000218im_/http://1.gravatar.com/avatar/ba043b2af6a355787f1b6fd1b1ea3eda?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/" rel="external " class="url">c.bavota</a></span> <span class="commentdate"> on November 5, 2010 at 12:16 pm</span> </div> <div class="comment-text"> <p>It works quite well and gives you more control over everything. That’s what I like about it as well.</p> </div> </div> </li> </ul> </li> </ol> <a name="respond"></a> <div id="respond"> <h3 id="reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/web/20101120000218/http://bavotasan.com/tutorials/using-css-resets/#respond" style="display:none;">Cancel reply</a></small></h3> <form action="https://web.archive.org/web/20101120000218/http://bavotasan.com/wp-comments-post.php" method="post" id="commentform"> <p class="comment-notes">Your email address will not be published. Required fields are marked <span class="required">*</span></p> <p class="comment-form-author"><label for="author">Name</label> <span class="required">*</span><br/><input id="author" name="author" type="text" value="" size="30"/></p> <p class="comment-form-email"><label for="email">Email</label> <span class="required">*</span><br/><input id="email" name="email" type="text" value="" size="30"/></p> <p class="comment-form-url"><label for="url">Website</label><br/><input id="url" name="url" type="text" value="" size="30"/></p> <p>To enter code in the comment box, please place it between <strong><pre lang="php"> </pre></strong> tags. You don't have to convert any characters to their hex/HTML code. Just add your code the way you would to any code editor.</p> <p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p> <p class="form-submit"> <input name="submit" type="submit" id="submit" value="Post Comment"/> <input type="hidden" name="comment_post_ID" value="2908" id="comment_post_ID"/> <input type="hidden" name="comment_parent" id="comment_parent" value="0"/> </p> </form> </div> </div> </div> </div>  <div id="sidebar"> <div id="search"> <form method="get" id="searchform" action="https://web.archive.org/web/20101120000218/http://bavotasan.com/"> <div> <input type="text" class="search_input" value="Search" name="s" id="s" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}"/> <input type="hidden" id="searchsubmit" value="Search"/> </div> </form> <div class="arrow"></div> </div> <div id="sideads">  <div id="bsap_1237633" class="bsarocks bsap_8982c17d635c33dbe23a7ef930777c37"></div>  <br class="clear"/>  <div id="bsap_1237624" class="bsarocks bsap_8982c17d635c33dbe23a7ef930777c37"></div>  </div> <br class="clear"/> <div class="line"></div> <div class="side-widget"> <h4>Most Popular Posts</h4> <ul class="wppp_list"> <li><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/" title="Creating a Mouseover Fade Effect with jQuery ">Creating a Mouseover Fade Effect with jQuery </a></li> <li><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/tutorials/a-simple-mouseover-hover-effect-with-jquery/" title="A Simple Mouseover Hover Effect with jQuery">A Simple Mouseover Hover Effect with jQuery</a></li> <li><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/" title="Full Size Background Image jQuery Plugin">Full Size Background Image jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/downloads/magazine-basic-free-wordpress-theme/" title="Magazine Basic v2.6 WordPress Theme">Magazine Basic v2.6 WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/tutorials/processing-multiple-forms-on-one-page-with-php/" title="Processing Multiple Forms on One Page with PHP">Processing Multiple Forms on One Page with PHP</a></li> <li><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/downloads/6-free-vinyl-record-vectors/" title="6 Free Vinyl Record Vectors">6 Free Vinyl Record Vectors</a></li> <li><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/tutorials/how-to-create-a-twitter-feed-on-your-web-site/" title="How to Create a Twitter Feed on Your Web Site">How to Create a Twitter Feed on Your Web Site</a></li> <li><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/tutorials/php-code-to-redirect-mobilehandheld-users/" title="PHP Code to Redirect Mobile/Handheld Users">PHP Code to Redirect Mobile/Handheld Users</a></li> <li><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/tutorials/limiting-the-number-of-words-in-your-excerpt-or-content-in-wordpress/" title="Excerpt or Content Word Limit in WordPress: Redux">Excerpt or Content Word Limit in WordPress: Redux</a></li> <li><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/tutorials/adding-extra-fields-to-the-wordpress-user-profile/" title="Adding Extra Fields to the WordPress User Profile">Adding Extra Fields to the WordPress User Profile</a></li> </ul> </div> <div id="affiliates-ads"> <a href="https://web.archive.org/web/20101120000218/http://themes.bavotasan.com/" class="themes"></a> <a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/downloads/delete-duplicate-posts-pro-wordpress-plugin/" class="deletedupes"></a> <a href="https://web.archive.org/web/20101120000218/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest&page=7" class="inmotion"></a> </div> <div class="line"></div> <div class="side-widget redlink"> <h4>Get a Premium Theme for FREE</h4> <p><a href="https://web.archive.org/web/20101120000218/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest" class="wordpress-logo"></a>Don't have a Web site? How would you like to have WordPress and a <a href="https://web.archive.org/web/20101120000218/http://themes.bavotasan.com/category/premium-themes">Themes by bavotasan.com</a> Premium theme installed and configured for <em>FREE</em>? All you need to do is <a href="https://web.archive.org/web/20101120000218/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest">sign up with InMotion Hosting through this link</a>. <br/> <br/> <a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/free-premium-theme/" class="fr"><em>Click here for more information »</em></a> </p> </div> <div class="side-widget"> <h4>Support c.bavota</h4> <p>If you would like to support <a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/">c.bavota</a> and <a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/">bavotasan.com</a>, please use the donate link below. Any amount, even $1.00, is appreciated (a man's gotta eat, ya know).</p> <a href="https://web.archive.org/web/20101120000218/https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5745952" id="donate" class="fr">Donate</a> </div> </div> </div> </div>  <div class="whiteline"></div> <div id="footer"> <div id="bottombar"> <a href="javascript:void(0)" class="backtotop">Back to Top<span></span></a> <div class="col col1"> <h4 class="one"><span></span>Stay in Touch</h4> <a href="https://web.archive.org/web/20101120000218/http://twitter.com/bavotasan" class="footer-twitter"><span></span>Follow me on Twitter</a><br/> <a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/feed/" class="footer-rss"><span></span>Subscribe to my RSS Feed</a> <br class="clear"/> <h4 class="two"><span></span>Stay in Tune</h4> <div class="tweets"></div> </div> <div class="col col2"> <h4 class="three"><span></span>Downloads</h4> <ul> <li><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/downloads/my-first-vanilla-plugin/">My First Vanilla Plugin</a></li> <li><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/downloads/delete-duplicate-posts-pro-wordpress-plugin/">Delete Duplicate Posts Pro WordPress Plugin</a></li> <li><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/downloads/feed-me-seymour-free-wordpress-theme/">Feed Me, Seymour 1.2</a></li> <li><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/downloads/magazine-basic-free-wordpress-theme/">Magazine Basic v2.6 WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/downloads/sliderota-jquery-plugin/">Sliderota jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/">Full Size Background Image jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/downloads/easy-overlay-modal-window-jquery-plugin/">Easy Overlay Modal Window jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/downloads/snowblind-free-wordpress-theme/">Snowblind v1.1.2 Free WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/downloads/8-free-colorful-background-textures-for-designers/">8 Free Colorful Background Textures for Designers</a></li> <li><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/downloads/stationery-premium-wordpress-theme/">Stationery Premium WordPress Theme</a></li> </ul> </div> <div class="col col3"> <h4 class="four"><span></span>Tutorials</h4> <ul> <li><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/tutorials/add-a-copyright-notice-to-copied-text/">Add a Copyright Notice to Copied Text</a></li> <li><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/tutorials/meta-descriptions-wordpress/">Meta Descriptions for WordPress</a></li> <li><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/tutorials/turning-on-php-errors/">Turning On PHP Errors</a></li> <li><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/tutorials/using-css-resets/">Using CSS Resets</a></li> <li><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/tutorials/a-sleek-navigation-menu-with-css3/">A Sleek Navigation Menu with CSS3</a></li> <li><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/tutorials/a-basic-jquery-slideshow/">A Basic jQuery Slideshow</a></li> <li><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/tutorials/text-rotation-css3/">Text Rotation with CSS3</a></li> <li><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/tutorials/adding-tweet-button-wordpress/">Adding a Tweet Button to WordPress</a></li> <li><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/tutorials/developing-themes-for-wordpress-make-money/">Developing Themes for WordPress: Part 5</a></li> <li><a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/tutorials/developing-themes-for-wordpress-options/">Developing Themes for WordPress: Part 4</a></li> </ul> </div> </div> </div> <div id="copyright"> <div id="copyright-wrapper"> Copyright © 2010 <a href="https://web.archive.org/web/20101120000218/http://bavotasan.com/">bavotasan.com</a>. All Rights Reserved. Powered by <a href="https://web.archive.org/web/20101120000218/http://www.wordpress.org/">WordPress</a>. </div> </div> <script src="https://web.archive.org/web/20101120000218js_/http://stats.wordpress.com/e-201046.js" type="text/javascript"></script> <script type="text/javascript"> st_go({blog:'5317602',v:'ext',post:'2908'}); var load_cmc = function(){linktracker_init(5317602,2908,2);}; if ( typeof addLoadEvent != 'undefined' ) addLoadEvent(load_cmc); else load_cmc(); </script> <script type="text/javascript" src="https://web.archive.org/web/20101120000218js_/http://bavotasan.com/wp-content/themes/bavotasan-2010/js/coolstuff.js"></script> <script type="text/javascript"> hs.graphicsDir = 'https://web.archive.org/web/20101120000218/http://bavotasan.com/images/graphics/'; hs.outlineType = 'rounded-white'; hs.outlineWhileAnimating = true; hs.showCredits = false; </script>  </body> </html>