1. Inicio
  2. CSS
  3. Diseño Web
  4. HTML
  5. JavaScript
  6. Miscelanea
  7. Recursos
  8. SEO
  9. Usabilidad

como sería una conversación entre CSS y una tablaimagen de Perdidoenlared

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:

Aprendiendo Web sin CSS

¿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)Transcending CSS, 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)Transcending CSS, 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

Etiquetas:

Comentarios

deja un comentario

  1. Avatar de eMulo 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. Avatar de Germán 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. Avatar de Laren 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.

  4. Avatar de Jesueto Jesueto

    Excelente! Muy bien explicado!
    Muchas gracias!

Deja un comentario

Algunos recursos para Diseñadores Web

Firebug
Genial extensión de Firefox que permite ver y editar HTML y CSS de cualquier página, entre otras cosas.
Web Developer Toolbar
Extensión de Firefox, agrega una barra de menu con muchas herramientas utiles para diseño y desarrollo web.
YSlow
Complemento para Firebug creado por Yahoo, da estadísticas de la velocidad de carga de la página así como sugerencias para mejorarla (requiere Firebug).
W3C Markup Validation Service
Valida tu HTML o XHTML, una herramienta indispensable.

Entra a la página de recursos para diseñadores web y mira la lista completa

¿Quien escribe Aprendiendo Web?

Germán MartínezHola, soy Germán Martínez, diseñador web y fundador de PreZentit.com, la primera aplicación web 2.0 creada en Perú.

La idea de Aprendiendo Web, es ser una fuente de información en español de estándares y buenas prácticas, así como de las últimas tendencias en diseño web.

Me apasiona el (X)HTML, CSS, SEO y todo lo que tenga que ver con diseño y desarrollo web.

-12.126668, -77.029910