Normalizar los estilos antes de empezar a trabajar

Antes de empezar a escribir tu CSS, es recomendable normalizar los estilos.

¿Normalizar los estilos?

Sí, normalizar los estilos. Lo que pasa es que los navegadores tienen estilos por defecto, que son los que usan cuando no hay un CSS específico que le explique al navegador como debe verse un determinado elemento.

Así que es recomendable empezar una hoja de estilos reseteando los valores por defecto del navegador.

Por ejemplo, así es como se ve aprendiendo web sin estilos:

¿Reconoces esos links azules y morados? Pues así es como los muestra el navegador si no hay CSS.

El color de los links en sí no es un gran problema, ¿pero que pasa con los margenes o el padding?.

Pues es posible que diferentes navegadores usen valores de margenes y padding diferentes (entre otras cosas), así que normalizar significa dar valores determinados de estilo para cualquier navegador. Esta es la mejor forma de evitar que tus diseños se vean diferentes en distintos navegadores.

Andy Clarke nos da una muy buena solución en su libro Transcending CSS: The Fine Art of Web Design (Voices That Matter), la pueden ver a continuación.

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

/* Normalizes font-size for headers */
h1,h2,h3,h4,h5,h6 { font-size : 100%; }

/* Removes list-style from lists */
ol,ul { list-style : none; }

/* Normalizes font-style and font-weight to normal */
address, caption, cite, code, dfn, em, strong, th, var
{ font-style : normal; font-weight : normal; }

/* Removes spacing in tables */
table { border-collapse : collapse; border-spacing : 0; }

/* Removes border from fieldset and img */
fieldset,img { border : 0; }

/* Left-aligns text in caption and th */
caption,th { text-align : left; }

/* Removes quotation marks from q */
q:before, q:after { content :''; }

Sólo es necesario hacerlo con la primera hoja de estilos que aparece en el HTML.

Listo, esto es todo lo que necesitas para normalizar los estilos.

Por cierto, si estás interesado te recomiendo comprar el libro Transcending CSS: The Fine Art of Web Design (Voices That Matter), es un libro algo avanzado pero muy bueno (de hecho uno de los que más me ha servido), y no podría faltar en la biblioteca de un diseñador web.

Actualización: una vez que tengas los estilos normalizados puedes definir el estilo de cualquier elemento, sólo tienes que agregarlo más abajo en la hoja de estilos.

Esta es justamente la idea de la normalización de estilos, empezar con estilos definidos para todos los navegadores por igual, y luego agregar los tuyos.

Gracias por el comentario eMulo

Comentarios

deja un comentario

1. eMulo

   Excelente. Es indudable la poca estandarización que hay en la presentación de un mismo sitio web con diferentes browsers. Ahora la pregunta: ¿puedo redefinir más adelante lo que tenía normalizado? Me explico: en la normalización está "h1" con un "font-size" de "100%"; ¿sería válido si lo pusiera más abajo del CSS con un font-size de "150%"?

2. Germán

   eMulo,
   Muy buena pregunta!
   Sí, puedes definir más adelante cada elemento siempre y cuando, como bien lo dices, lo escribas más abajo en el CSS.

   Es completamente válido, es más, esa es justo la idea de normalizar los estilos. Poder "empezar desde 0" con todos los navegadores por igual y luego definir cada estilo.

   Gracias por la pregunta, ahora mismo actualizo el post para explicar eso.

3. Laren

   Buen post para entender este tema. Ahora seria bueno echarle un vistazo al RESET de Erick Meyer. Se dice que es el más óptimo y ha ido avanzando de versión en version:
   --
   http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
   --
   Yahoo también tiene uno pero no tiene mucha acojida, aunque nunca está de más probarlo.