Curso de diseño web 2012
para diseñadores y estudiantes de diseño en comunicación visual y multimedia
Valores por defecto de las etiquetas HTML y reset CSS
Antes de empezar a utilizar código css es importante conocer los valores por defecto que tienen las etiquetas HTML para aprovecharlos, modificarlos o anularlos.
Cualquier sitio bien construido en html, usando encabezados, listas, párrafos, negritas, etc, no necesita diseño en css para ser legible: las etiquetas de encabezados hacen el texto más grande que un párrafo y le agregan la variante negrita al texto para destacarlo, los párrafos tienen márgenes arriba y abajo para separarse entre si, las listas tienen viñetas para identificar cada item, los enlaces son azules y subrayados para que el usuario los encuentre fácilmente. Esos son algunos de los valores por defecto que tienen las etiquetas HTML para mejorar la lectura del documento. No es un defecto, es una caracteristica que hace funcional al lenguaje.
Si a ese documento bien estructurado, le queremos agregar diseño, tendremos que escribir código CSS con todas las propiedades que necesitemos. Pero es necesario conocer los valores por defecto de las etiquetas para saber qué necesitamos modificar o que podemos aprovechar.
Reset CSS
En los últimos años se popularizó el uso de archivos reset.css de diferentes autores. Estos archivos tienen el objetivo de anular por completo todos los valores por defecto de las etiquetas html para empezar desde cero con nuestro diseño. Esta es una práctica que no comparto ya que muchos de los valores por defecto pueden servirnos (por ejemplo el espacio entre los párrafos), no molestarnos (como el tamaño de un h1 porque finalmente lo ocultamos con css y mostramos una imagen) y lo que es más grave: a veces se anula un valor en el reset.css para volver a escribir lo mismo en nuestra hoja de estilos. Entonces, partiendo de la base de que el html es perfectamente legible hasta que los diseñadores empezamos a controlar el diseño, mi opinión es que cuanto más podamos respetar el html, mejor resultado obtendremos.
Las principales etiquetas y las propiedades css que las modifican
body: La etiqueta <body> tiene margen por defecto de unos 10px para separar los textos del borde del navegador. Para anularlo en css hay que escribir body {margin:0px}
h1, h2, h3: Los encabezados tienen un cuerpo mayor al tamaño del texto, siendo el más grande el <h1>. Además tienen negrita y márgenes arriba y abajo. Para anular o modificar estos valores, le corresponden tres propiedades CSS por ejemplo: h1 {margin:0px; font-weight:normal; font-size:30px}
ul: La etiqueta <ul> tiene por defecto 15px de padding-left y 10px de margin-top y margin-bottom, además de la viñeta. Para anular los tres valores, incluyendo los de la etiqueta <li> se escribe: ul, li {margin:0; padding:0; list-style:none}
p: La etiqueta <p> sólo tiene margin-top y margin-bottom de unos 15 px, para quitarlo se utiliza margin:0
div: La etiqueta <div> sólo tiene el atributo de bloque, pero no tiene padding ni margin
strong: La etiqueta <strong> sólo agrega negrita, para quitarlo la propiedad es font-weight:normal
a: La etiqueta <a> tiene dos propiedades: color de texto y subrayado, se modifica con color:#000; text-decoration:none
img: La etiqueta <img> cuando se encuentra dentro de un vínculo, tiene borde azul, para anular todos los bordes de cualquier imagen vinculada dentro de un sitio se usa img {border:0}
Links recomendados:
http://www.cssblog.es/10-tecnicas-para-resetear-css/
http://www.cristalab.com/blog/no-a-los-css-reset-c97863l/