Cómo sobrescribir hojas de estilo por defecto
Por Iván Bustos en CSS. Actualizado: 26/5/2011. Visitado 1083 veces. Compartir en FacebookTwitterLinkedIn
Iván Bustos, un desarrollador web en Colombia con más de 10 años de experiencia en el desarrollo de experiencias en línea, enamorado de los estándares web y del poder de JavaScript. Fundador de Estilocss.com y creador de IBForm.
Aprenda más en:
http://www.ivanbustos.com
Dificultad: Principiante.
Requerimientos: No hay requerimientos para seguir este tutorial.
Tiempo estimado para completar: 10 minutos.
Como ya muchos saben, desarrollar y diseñar aplicaciones para distintos navegadores web puede resultar (por no decir nada más) una experiencia complicada.
Según la W3C, todos los navegadores deberían seguir una serie de reglas al momento de representar una documento HTML. Lamentablemente ningún navegador sigue estas indicaciones al pie de la letra. Algunos sin embargo, lo hacen mejor que otros.
Uno de los primeros arreglos más populares a esta problemática consistió en establecer a la márgen (margin) y la sangría (padding) un valor de cero a todo objeto HTML (Recuerda que el asterisco permite seleccionar todos los objetos en CSS). Esta técnica permitió lidiar más fácilmente con el curioso modelo de Caja de Internet Explorer y para facilitar el desarrollo en otros navegadores.
- *
- {
- margin:0;
- padding:0;
- }
Esta fue la técnica que usé cuando empecé hasta que encontré una solución magnífica y mucho más completa creada por David Hellsing en el 2007 que no sólo arregla los problemas de margen y de sangría sino que también estandariza virtualtmente todos los demás aspectos de un documento HTML. Demostraré el poder de esa técnica ( y la compararé con la anterior ) con las siguientes capturas de pantalla:
Documento HTML sin ningún método de reinicialización.
Documento HTML usando el método clásico de margen y sangría.
Documento HTML usando el método de David Hellsing.
Como puedes ver, usando el método de David Hellsing podemos sobreescribir cualquier propiedad que venga por defecto en cualquier navegador permitiéndonos fácilmente y sin inconvenientes crear diseños rápidos y atractivos en minutos que serán mucho más compatibles a través de los diversos navegadores web actualmente disponibles.
David Hellsing fue muy generoso en publicar su trabajo bajo una licencia GNU. Para usar este método en tus proyectos, descarga el archivo reset.css y colócalo en el directorio donde están tus archivos CSS en tu proyecto. Luego, abre tu archivo CSS principal y agrega las siguiente línea:
- $import url('reset.css');
¡Genial! Ya estás listo para crear experiencias web de una manera más fácil y cómoda. Espero te haya sido útil este tutorial.
Fotografía de pies en una hamaca usada bajo licencia Creative Commons 2.5 gracias a Ewakulak
El 18 de marzo de 2011, Fernando Loor dijo:
Interesante articulo, es de facil entendimiento para gente que no sabemos nada y recien estamos empezando, eres un gran maestro del css, te queremos ivan