Reset CSS la mejor forma de comenzar tu hoja de estilos CSS

17 November, 2011

Ramón Torres

Siempre que comenzamos un proyecto tenemos algunos inconvenientes con margenes y padding (relleno) pareciera que cada navegador los interpretaba a su antojo y esto sin mencionar las fuentes y tamaños en especial para los títulos (h1, h2, h3) y el contenido en general, realmente esto es un verdadero dolor de cabeza, pero existe una solución: Reset CSS que simplemente es reajustar nuestros CSS de una forma general para todos los navegadores.

Bueno sin nada más que agregar aqui dejo mi reset CSS que ocupo ya desde hace mucho y me ha funcionado bastante bien pueden ocuparlos en sus proyectos y modificarlo a su antojo:

body,
h1, h2, h3, h4, h5, h6,
p,
form{
    border:        0;
    margin:        0px;
    padding:        0px;
}
 
body,
form, input, textarea{
    font-family:     arial,verdana,sans-serif;
    font-size:         12px;
}
 
body{
    color: #000;
}
 
h1{ font-size: 28px; }
h2{ font-size: 23px; }
h3{ font-size: 19px; }
h4{ font-size: 16px; }
h5{ font-size: 14px; }
h6{ font-size: 12px; }
 
a:link {
  color: #000088;
  outline: none;
}
a:visited{     color: #000088; }
 
a:hover{
    color: #000000;
    text-decoration: none;
}
 
p {line-height: 18px; }

Bueno también les dejo el reset CSS de Eric Meyer (considerado el gurú de css) que está más completo

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
 
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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Post relacionados:

Categories: CSS

Post Tags: CSS