El papel del archivo de reset CSS
Antes de empezar a crear un diseño visual de una página Web vamos a ver cómo se utiliza un archivo de reset de CSS. Todos los elementos HTML se muestran en pantalla utilizando los estilos por defecto que aplica cada navegador, donde cada navegador aplica sus propias reglas para mostrar los elementos en pantalla. Estas diferencias son las que permiten que en principio los navegadores muestren las páginas en formas distintas.
A raíz de estas diferencias, Eric Meyer introdujo en el mundo del diseño y programación web el concepto de “hoja de estilo reset” (Reset Stylesheet). Su idea era elaborar una plantilla base que garantizara que cada navegador, aplicaría las mismas reglas a los elementos de una página. Sus reglas son de uso público y pueden encontrase en la URL:
http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/
Para incluirla en nuestros proyectos, basta con realizar el vínculo desde la etiqueta <head> de nuestras páginas antes de incluir cualquier otra hoja de estilo:
Muchos diseñadores preparan sus propias hojas de estilos de reset para resolver sus propias necesidades. Por ejemplo, si la familia de fuentes que utilizas con más frecuencia es Verdana, puede añadir esta regla al estilo del elemento body.
Propiedades WIDTH y HEIGHT
La propiedad width permite definir el ancho de los elementos de bloque mientras que la propiedad height establece la altura de los elementos de bloque. Aunque normalmente tanto para la propiedad width como height se utiliza pixeles puede recibir también porcentajes. La referencia para este caso es el ancho o alto de su elemento contenedor. Sin embargo si ese elemento no tiene definido un ancho o un alto en forma explícita, se ignora tanto el ancho como el alto en porcentajes. Ahora definiremos en una hoja de estilo CSS los siguientes selectores y reglas para el archivo HTML: