10 Técnicas para Reset CSS
Autor: Ricardo V. Kaspper | Publicado: 2011-06-22T20:05:00-03:00

Por padrão, todos os elementos HTML possuem um estilo incorporado, e isso varia de Browser para Browser, não existe um padrão. Com isso você pode passar por vários problemas ao tentar desenvolver CSS Cross-browser.

Para evitar esse tipo de problema, é aconselhável utilizar técnicas de CSS Reset, ou seja, inciar o CSS com todos as tags HTML sem qualquer estilo padrão definido pelo browser. Abaixo vou mostrar algumas técnicas, algumas desconhecidas por alguns, outras já utilizadas por default por vários desenvolvedores.


1. Generic Reset CSS

Esse com certeza é o mais conhecido e utilizado pelos desenvolvedores:

* { 
&nbsp;&nbsp;&nbsp;&nbsp;padding: 0; &nbsp;&nbsp;&nbsp;&nbsp;margin: 0; &nbsp;&nbsp;&nbsp;&nbsp;border: 0; }
2. Ateneu Popular CSS Resethtml, body,1, h2, h3, &nbsp;div, span, applet, object, iframe, h
h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } :focus { outline: 0;} a, a:link, a:visited, a:hover, a:active{text-decoration:none} table { border-collapse: separate;border-spacing: 0;} th, td {text-align: left; font-weight: normal;} img, iframe {border: none; text-decoration:none;} ol, ul {list-style: none;} input, textarea, select, button {font-size: 100%;font-family: inherit;} select {margin: inherit;} hr {margin: 0;padding: 0;border: 0;color: #000;background-color: #000;height: 1px}


3. Chris Poteet’s Reset CSS

* {vertical-align: baseline; &nbsp;&nbsp;&nbsp;&nbsp;font-family: inherit; &nbsp;&nbsp;&nbsp;&nbsp;font-style: inherit; &nbsp;&nbsp;&nbsp;&nbsp;font-size: 100%; &nbsp;&nbsp;&nbsp;&nbsp;border: none; &nbsp;&nbsp;&nbsp;&nbsp;padding: 0; &nbsp;&nbsp;&nbsp;&nbsp;margin: 0; } body { &nbsp;&nbsp;&nbsp;&nbsp;padding: 5px; } h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl { &nbsp;&nbsp;&nbsp;&nbsp;margin: 20px 0; } li, dd, blockquote { &nbsp;&nbsp;&nbsp;&nbsp;margin-left: 40px; } table { &nbsp;&nbsp;&nbsp;&nbsp;border-collapse: collapse; &nbsp;&nbsp;&nbsp;&nbsp;border-spacing: 0; }


4. Yahoo’s CSS Reset

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,fieldset,input,textarea,p,blockquote,th,td { &nbsp;&nbsp;&nbsp;&nbsp;padding: 0; &nbsp;&nbsp;&nbsp;&nbsp;margin: 0; } table { &nbsp;&nbsp;&nbsp;&nbsp;border-collapse: collapse; &nbsp;&nbsp;&nbsp;&nbsp;border-spacing: 0; } fieldset,img { &nbsp;&nbsp;&nbsp;&nbsp;border: 0; } address,caption,cite,code,dfn,em,strong,th,var { &nbsp;&nbsp;&nbsp;&nbsp;font-weight: normal; &nbsp;&nbsp;&nbsp;&nbsp;font-style: normal; } ol,ul { &nbsp;&nbsp;&nbsp;&nbsp;list-style: none; } caption,th { &nbsp;&nbsp;&nbsp;&nbsp;text-align: left; } h1,h2,h3,h4,h5,h6 { &nbsp;&nbsp;&nbsp;&nbsp;font-weight: normal; &nbsp;&nbsp;&nbsp;&nbsp;font-size: 100%; } q:before,q:after { &nbsp;&nbsp;&nbsp;&nbsp;content:''; } abbr,acronym { border: 0; }


5. Eric Meyer Reset CSS

Esse com certeza deve ser o mais utilizado entre os desenvolvedores,
html, body, div, span, applet, object, iframe, table, caption, 
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, dl, dt, dd, ol, ul, li, fieldset, form, label, legend { &nbsp;&nbsp;&nbsp;&nbsp;vertical-align: baseline; &nbsp;&nbsp;&nbsp;&nbsp;font-family: inherit; &nbsp;&nbsp;&nbsp;&nbsp;font-weight: inherit; &nbsp;&nbsp;&nbsp;&nbsp;font-style: inherit; &nbsp;&nbsp;&nbsp;&nbsp;font-size: 100%; &nbsp;&nbsp;&nbsp;&nbsp;outline: 0; &nbsp;&nbsp;&nbsp;&nbsp;padding: 0; &nbsp;&nbsp;&nbsp;&nbsp;margin: 0; &nbsp;&nbsp;&nbsp;&nbsp;border: 0; } :focus { &nbsp;&nbsp;&nbsp;&nbsp;outline: 0; } body { &nbsp;&nbsp;&nbsp;&nbsp;background: white; &nbsp;&nbsp;&nbsp;&nbsp;line-height: 1; &nbsp;&nbsp;&nbsp;&nbsp;color: black; } ol, ul { &nbsp;&nbsp;&nbsp;&nbsp;list-style: none; } table { &nbsp;&nbsp;&nbsp;&nbsp;border-collapse: separate; &nbsp;&nbsp;&nbsp;&nbsp;border-spacing: 0; } caption, th, td { &nbsp;&nbsp;&nbsp;&nbsp;font-weight: normal; &nbsp;&nbsp;&nbsp;&nbsp;text-align: left; } blockquote:before, blockquote:after, q:before, q:after { &nbsp;&nbsp;&nbsp;&nbsp;content: ""; } blockquote, q { &nbsp;&nbsp;&nbsp;&nbsp;quotes: "" ""; }

6. Tantek Celik Reset CSS

:link,:visited { text-decoration:none } ul,ol { list-style:none } h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; } ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input { margin:0; padding:0 } a img,:link img,:visited img { border:none } address { font-style:normal }


7. Christian Montoya Reset CSS

html, body, form, fieldset { &nbsp;&nbsp;&nbsp;&nbsp;margin: 0; &nbsp;&nbsp;&nbsp;&nbsp;padding: 0; &nbsp;&nbsp;&nbsp;&nbsp;font: 100%/120% Verdana, Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address { &nbsp;&nbsp;&nbsp;&nbsp;margin: 1em 0; &nbsp;&nbsp;&nbsp;&nbsp;padding: 0; } li, dd, blockquote { &nbsp;&nbsp;&nbsp;&nbsp;margin-left: 1em; } form label { &nbsp;&nbsp;&nbsp;&nbsp;cursor: pointer; } fieldset { &nbsp;&nbsp;&nbsp;&nbsp;border: none; } input, select, textarea { &nbsp;&nbsp;&nbsp;&nbsp;font-size: 100%; &nbsp;&nbsp;&nbsp;&nbsp;font-family: inherit; }


8. Rudeworks Reset CSS

* { &nbsp;&nbsp;&nbsp;&nbsp;margin: 0; &nbsp;&nbsp;&nbsp;&nbsp;padding: 0; &nbsp;&nbsp;&nbsp;&nbsp;border: none; } html { &nbsp;&nbsp;&nbsp;&nbsp;font: 62.5% "Lucida Grande", Lucida, Verdana, sans-serif; &nbsp;&nbsp;&nbsp;&nbsp;text-shadow: #000 0px 0px 0px; } ul { &nbsp;&nbsp;&nbsp;&nbsp;list-style: none; &nbsp;&nbsp;&nbsp;&nbsp;list-style-type: none; } h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address { &nbsp;&nbsp;&nbsp;&nbsp;font-weight: normal; &nbsp;&nbsp;&nbsp;&nbsp;margin: 0 0 1em 0; } cite, em, dfn { &nbsp;&nbsp;&nbsp;&nbsp;font-style: italic; } sup { &nbsp;&nbsp;&nbsp;&nbsp;position: relative; &nbsp;&nbsp;&nbsp;&nbsp;bottom: 0.3em; &nbsp;&nbsp;&nbsp;&nbsp;vertical-align: baseline; } sub { &nbsp;&nbsp;&nbsp;&nbsp;position: relative; &nbsp;&nbsp;&nbsp;&nbsp;bottom: -0.2em; &nbsp;&nbsp;&nbsp;&nbsp;vertical-align: baseline; } li, dd, blockquote { &nbsp;&nbsp;&nbsp;&nbsp;margin-left: 1em; } code, kbd, samp, pre, tt, var, input[type=‘text’], textarea { &nbsp;&nbsp;&nbsp;&nbsp;font-size: 100%; &nbsp;&nbsp;&nbsp;&nbsp;font-family: monaco, "Lucida Console", courier, mono-space; } del { &nbsp;&nbsp;&nbsp;&nbsp;text-decoration: line-through; } ins, dfn { &nbsp;&nbsp;&nbsp;&nbsp;border-bottom: 1px solid #ccc; } small, sup, sub { &nbsp;&nbsp;&nbsp;&nbsp;font-size: 85%; } abbr, acronym { &nbsp;&nbsp;&nbsp;&nbsp;text-transform: uppercase; &nbsp;&nbsp;&nbsp;&nbsp;font-size: 85%; &nbsp;&nbsp;&nbsp;&nbsp;letter-spacing: .1em; &nbsp;&nbsp;&nbsp;&nbsp;border-bottom-style: dotted; &nbsp;&nbsp;&nbsp;&nbsp;border-bottom-width: 1px; } a abbr, a acronym { &nbsp;&nbsp;&nbsp;&nbsp;border: none; } sup { &nbsp;&nbsp;&nbsp;&nbsp;vertical-align: super; } sub { &nbsp;&nbsp;&nbsp;&nbsp;vertical-align: sub; } h1 { &nbsp;&nbsp;&nbsp;&nbsp;font-size: 2em; } h2 { &nbsp;&nbsp;&nbsp;&nbsp;font-size: 1.8em; } h3 { &nbsp;&nbsp;&nbsp;&nbsp;font-size: 1.6em; } h4 { &nbsp;&nbsp;&nbsp;&nbsp;font-size: 1.4em; } h5 { &nbsp;&nbsp;&nbsp;&nbsp;font-size: 1.2em; } h6 { &nbsp;&nbsp;&nbsp;&nbsp;font-size: 1em; } a, a:link, a:visited, a:hover, a:active { &nbsp;&nbsp;&nbsp;&nbsp;outline: 0; &nbsp;&nbsp;&nbsp;&nbsp;text-decoration: none; } a img { &nbsp;&nbsp;&nbsp;&nbsp;border: none; &nbsp;&nbsp;&nbsp;&nbsp;text-decoration: none; } img { &nbsp;&nbsp;&nbsp;&nbsp;border: none; &nbsp;&nbsp;&nbsp;&nbsp;text-decoration: none; } label, button { &nbsp;&nbsp;&nbsp;&nbsp;cursor: pointer; } input:focus, select:focus, textarea:focus { &nbsp;&nbsp;&nbsp;&nbsp;background-color: #FFF; } fieldset { &nbsp;&nbsp;&nbsp;&nbsp;border: none; } .clear { &nbsp;&nbsp;&nbsp;&nbsp;clear: both; } .float-left { &nbsp;&nbsp;&nbsp;&nbsp;float: left; } .float-right { &nbsp;&nbsp;&nbsp;&nbsp;float: right; body { &nbsp;&nbsp;&nbsp;&nbsp;text-align: center; } #wrapper { &nbsp;&nbsp;&nbsp;&nbsp;margin: 0 auto; &nbsp;&nbsp;&nbsp;&nbsp;text-align: left; }


9. Anieto2K Reset CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, center, u, b, i { &nbsp;&nbsp;&nbsp;&nbsp;margin: 0; &nbsp;&nbsp;&nbsp;&nbsp;padding: 0; &nbsp;&nbsp;&nbsp;&nbsp;border: 0; &nbsp;&nbsp;&nbsp;&nbsp;outline: 0; &nbsp;&nbsp;&nbsp;&nbsp;font-weight: normal; &nbsp;&nbsp;&nbsp;&nbsp;font-style: normal; &nbsp;&nbsp;&nbsp;&nbsp;font-size: 100%; &nbsp;&nbsp;&nbsp;&nbsp;font-family: inherit; &nbsp;&nbsp;&nbsp;&nbsp;vertical-align: baseline} body { &nbsp;&nbsp;&nbsp;&nbsp;line-height: 1} :focus { &nbsp;&nbsp;&nbsp;&nbsp;outline: 0} ol, ul { &nbsp;&nbsp;&nbsp;&nbsp;list-style: none} table { &nbsp;&nbsp;&nbsp;&nbsp;border-collapse: collapse; &nbsp;&nbsp;&nbsp;&nbsp;border-spacing: 0} blockquote:before, blockquote:after, q:before, q:after { &nbsp;&nbsp;&nbsp;&nbsp;content: ""} blockquote, q { &nbsp;&nbsp;&nbsp;&nbsp;quotes: "" ""} input, textarea { &nbsp;&nbsp;&nbsp;&nbsp;margin: 0; &nbsp;&nbsp;&nbsp;&nbsp;padding: 0} hr { &nbsp;&nbsp;&nbsp;&nbsp;margin: 0; &nbsp;&nbsp;&nbsp;&nbsp;padding: 0; &nbsp;&nbsp;&nbsp;&nbsp;border: 0; &nbsp;&nbsp;&nbsp;&nbsp;color: #000; &nbsp;&nbsp;&nbsp;&nbsp;background-color: #000; &nbsp;&nbsp;&nbsp;&nbsp;height: 1px}


10. CSSLab CSS Reset

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { &nbsp;&nbsp;&nbsp;&nbsp;margin: 0; &nbsp;&nbsp;&nbsp;&nbsp;padding: 0; &nbsp;&nbsp;&nbsp;&nbsp;border: 0; &nbsp;&nbsp;&nbsp;&nbsp;outline: 0; &nbsp;&nbsp;&nbsp;&nbsp;font-weight: inherit; &nbsp;&nbsp;&nbsp;&nbsp;font-style: inherit; &nbsp;&nbsp;&nbsp;&nbsp;font-size: 100%; &nbsp;&nbsp;&nbsp;&nbsp;font-family: inherit; &nbsp;&nbsp;&nbsp;&nbsp;vertical-align: baseline; } :focus { &nbsp;&nbsp;&nbsp;&nbsp;outline: 0; } table { &nbsp;&nbsp;&nbsp;&nbsp;border-collapse: separate; &nbsp;&nbsp;&nbsp;&nbsp;border-spacing: 0; } caption, th, td { &nbsp;&nbsp;&nbsp;&nbsp;text-align: left; &nbsp;&nbsp;&nbsp;&nbsp;font-weight: normal; } a img, iframe { &nbsp;&nbsp;&nbsp;&nbsp;border: none; } ol, ul { &nbsp;&nbsp;&nbsp;&nbsp;list-style: none; } input, textarea, select, button { &nbsp;&nbsp;&nbsp;&nbsp;font-size: 100%; &nbsp;&nbsp;&nbsp;&nbsp;font-family: inherit; } select { &nbsp;&nbsp;&nbsp;&nbsp;margin: inherit; } /* Fixes incorrect placement of numbers in ol's in IE6/7 */ol { margin-left:2em; } /* == clearfix == */.clearfix:after { &nbsp;&nbsp;&nbsp;&nbsp;content: "."; &nbsp;&nbsp;&nbsp;&nbsp;display: block; &nbsp;&nbsp;&nbsp;&nbsp;height: 0; &nbsp;&nbsp;&nbsp;&nbsp;clear: both; &nbsp;&nbsp;&nbsp;&nbsp;visibility: hidden; } .clearfix {display: inline-block;} * html .clearfix {height: 1%;} .clearfix {display: block;}Se você costuma utilizar alguma técnica de Reset CSS que não foi listada aqui, ou criou alguma, liste-a nos comentários.