Trucos para tus hojas de estilo (CSS)

Tamaño del texto sin usar pixeles

Si aún no sabes cómo los diseñadores pueden trabajar en sus hojas de estilos usando como unidad "em" en vez de "px":

body { font-size: 62.5% }

Simplemente especifica un porcentaje para el tamaño del texto y ya puedes empezar a utilizar "em" como medida para el tamaño de las fuentes.

Por ejemplo el estilo para un parrafo quedaría:

p { font-size: 1.2em; line-height: 1.5em; }

Haz el código de fácil lectura

Os propondo esta manera de organizar tus hojas de estilo para facilitar su lectura:

h1 {}
h1#logo { font-size: 2em; color: #000; }
h2 {}
h2.title { font-size: 1.8em; font-weight: normal; }

De esta manera unicamente tendrás que buscar las principales etiquetas y de ellas colgarán las demas etiquetas relacionadas, es altamente recomendable esta forma de organización para tus hojas de estilo.

Separa el código en bloques

Es de sentido común pero la gran mayoria de los diseñadores no lo tienen en cuenta, es muy útil para aquellas hojas de estilos que se desarrollan durante bastante tiempo, puesto que será más sencillo encontrar los diferentes bloques.

/* Estructura */
/* Tipografia */
/* Enlaces */
/* Listas,imágenes */

No escribas código redundante

Muchas veces se tiende a escribir una y otra vez similares etiquetas como “margin: 0; padding: 0;” para cada una de nuestros elementos, es innecesario y tiene una fácil solución simplemente utilizalas como etiquetas por defecto de esta manera:

* { margin: 0; padding: 0; }

Solamente deberás definir estas etiquetas en aquellos elementos que tengan una configuración diferente.

Enlaces Relacionados

• El futuro de Internet, X/HTML 5 vs XHTML 2
• Validar Flash para XHTML
• Conversor Online de JPG a HTML (IMG2HTML)
• Buenas herramientas web de diseño
• La gran mayoría de blogs no cumplen los estándares
• Blueprint, framework para css
• Google prueba un nuevo diseño de portada
• Evita sobrecargar tus archivos CSS
• Un buen pie de página
• Editores CSS