Universidad Abierta Interamericana UAI

Ingeniera en Sistemas Informticos

Lenguajes de Programacin para La Administracin

4to ao

Trabajo Prctico: CSS Reset

Docente:
Franco, Noelia Soledad

Integrantes:
Emiliano Josu Bechio
Jos Genari
Mariana Espndola
Rodrigo Gabriel Barcel

Mayo de 2.014

Introduccin a RESET CSS

Las hojas de estilo surgieron en la dcada de 1970, luego de la creacin del lenguaje
de etiquetas SGML, ya que se pudo apreciar la necesidad de aplicar diferentes estilos a los
documentos. Para facilitar el diseo o maquetado de las pginas es que se crearon las hojas
de estilo pero fue hasta octubre de 1994 que se crea el organismo W3C (World Wide Web
Consortium), encargado de crear todos los estndares relacionados con la web, que se
propuso la creacin de un lenguaje de hojas de estilos especfico para el lenguaje HTML y se
presentaron nueve propuestas. Las dos propuestas que se tuvieron en cuenta fueron la
CHSS (Cascading HTML Style Sheets) y la SSP (Stream-based Style Sheet Proposal),
organismo que est dirigido por Tim Berners-Lee, el creador original de URL (Uniform
Resource Locator, Localizador Uniforme de Recursos), HTTP (HyperText Transfer Protocol,
Protocolo de Transferencia de HiperTexto) y HTML (Hyper Text Markup Language, Lenguaje
de Marcado de HiperTexto) que son las principales tecnologas sobre las que se basa la
Web.
La propuesta CHSS fue realizada por Hkon Wium Lie y SSP fue propuesto por Bert
Bos. Entre finales de 1994 y 1995 casi coincidentemente con la fecha de fundacin de la
W3C Lie y Bos se unieron para definir un nuevo lenguaje que tomaba lo mejor de cada
propuesta y lo llamaron CSS (Cascading Style Sheets), decidiendo en 1995, el desarrollo y
estandarizacin del CSS aadindolo y permitiendo que los documentos estructurados en
HTML tengan una presentacin incorporando el diseo y a su vez tenga los estndares para
los diferentes navegadores.
La primera recomendacin oficial publicada por el W3C se public a finales de 1996,
conocida como "CSS nivel 1", sin embargo estn vigentes en la actualidad el HTML5 y el
CSS3.
El consorcio W3C, junto con su especificacin de CSS 2.11 del 23 de abril de 2009,
public en su recomendacin, un valor por defecto para cada propiedad de CSS que
deberan adoptar los diferentes navegadores pero debido a que algunos navegadores hacen
caso omiso a estos estndares y recomendaciones, es que las pginas Web cambian su
visualizacin de una a otro navegador. Es evidente que se profundiza este problema ya que
cuando los navegadores nos muestran las pginas Web, le aplican las hojas de estilos CSS
que el programador/diseador gener e incluy dentro de su maquetacin. Sin embargo, el
navegador aplica adicionalmente 2 hojas de estilos ms: la hoja de estilos del propio
navegador y la hoja de estilos del usuario del navegador.
La hoja de estilos del navegador se utilizan para establecer el estilo inicial por defecto
de todos los elementos HTML como pueden ser los tamaos de letra, decoracin del texto,
mrgenes, etc. Esta hoja de estilos siempre se aplica a todas las pginas web en primera

instancia, y el resultado lo podemos ver si creamos una pgina a la que no le aplicamos

ningn estilo CSS personalizado
La hoja de estilos del usuario es la que puede configurar y aplicar el usuario por medio
de su navegador y aunque la mayora de los usuarios no suelen utilizarla, podran
personalizar un estilo propio que se cargar en segundo lugar.
Se cargan por ltimo las hojas de estilo que del programador o diseador. Por ello,
tendrn la prioridad mxima, los estilos del programador o diseador ya que se aplican en
ltima instancia.
Sin embargo aquellos estilos que no estn definidos en la hoja del programador no
sern aplicados y de esta manera se aplicarn aquellos definido previamente, ya sea por el
usuario y de no estar definidos stos aplicar los del navegador
Tenemos que tener en cuenta que CSS define la palabra reservada !important para
controlar la prioridad de las declaraciones de las diferentes hojas de estilos. Las reglas CSS
que incluyen la palabra !important tienen prioridad sobre el resto de las reglas CSS,
independientemente del orden en el que se incluyan o definan las reglas.
En caso de igualdad, las reglas !important de los usuarios son ms importantes que
las reglas !important del diseador. Gracias a esta caracterstica, si un usuario sufre
deficiencias visuales, puede crear una hoja de estilos CSS con reglas de tipo !important con
la seguridad de que el navegador siempre aplicar esas reglas por encima de cualquier otra
regla definida por los diseadores.
El principal problema de las hojas de estilo no es si se aplican las hojas de estilo del
navegador, del usuario o las del programador o diseador, sino que es que las hojas de estilo
propias de cada navegador cuentan con valores distintos que aplican por defecto tal como se
da en los casos en que se use Google Chrome, Mozilla Firefox, Internet Explorer, etc.
Aunque muchos de los navegadores coinciden en algunos valores importantes como
pueden ser el tipo de fuente de letra: serif, el color de la fuente de letra: negro, entre otros,
pero sin embargo presentan diferencias en valores que suelen ser de gran importancia por su
frecuente utilizacin o bien por la importancia que representan en el maquetado como son
los mrgenes verticales (margin-bottom y margin-top) de los ttulos de seccin (<h1> a
<h6>), la tabulacin izquierda de los elementos de las listas (margin-left o padding-left) y
hasta el tamao de lnea del texto (line-height), que cambiarn dependiendo de cada uno de
los diferentes navegadores que podramos usar.
Por ello se puede afirmar que las hojas de estilo de los navegadores son diferentes y
cuando un diseador prueba sus pginas sobre diferentes navegadores, es comn
encontrarse con diferencias visuales apreciables.
Para solucionar este problema con el que se suelen encontrarse los programadores
web al probar la visualizacin de la pgina en los diferentes navegadores se borran o
resetean los estilos que aplican por defecto los mismos, antes de aplicar los estilos propios a
sus pginas evitando se apliquen los estilos por defectos de los diferentes navegadores.

Este tipo de problema se podra solucionar cargando en nuestra hoja de estilos

valores que establezcan en cero los diferentes atributos de nuestra pgina, por ello por
ejemplo si quisiramos inicializar los atributos de mrgenes y los espaciadores de los
diferentes contenedores de todos los elementos de la pgina podramos establecerlos
mediante la sentencia en CSS:
* { margin: 0; padding: 0; }

Aunque la sentencia anterior funciona correctamente en CSS y no tendra por qu

causar ningn tipo de conflicto esta es una solucin se suele considerar no apropiada ya que
para este problema es que se ha creado una hoja de estilos CSS que neutraliza todos los
estilos que aplican por defecto los diferentes navegadores web y que pueden afectar a la
visualizacin o el aspecto del proyecto a realizar cuya funcin es la de minimizar, en la
medida de lo posible, las mltiples diferencias visuales que se dan a la hora de mostrar una
misma pgina web, en diferentes navegadores. A este tipo de hoja de estilos se les llama
CSS Reset.

Algunos de los CSS Reset ms populares

Actualmente, existen muchos mtodos empleados para resetear las hojas de estilos,
es decir hay muchos reset.css siendo algunos ms populares que otros o bien ms utilizados
por los programadores de sitios o pginas web. A continuacin, se mencionan algunos de los
reset.css ms conocidos y utilizados por los programadores:
Reset Genrico
Consiste en reseteat o aplicarle el valor 0 a tres propiedades comunes a la mayora
de los elementos o etiquetas utilizadas en HTML.
*{
padding: 0;
margin: 0;
border: 0;
}

Reset Universal
Este mtodo resetea mayor cantidad de propiedades o atributos de diferentes
elementos o etiquetas utilizadas en HTML.
*{
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}

Reset de Eric Meyer

ste es uno de los CSS Reset ms populares y utilizados por los diferentes
programadores , se lo llama as por su programador Eric Meyer.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

Reset de Yahoo

Este reset lleva este nombre a partir que dicha empresa public su mtodo para
resetear los estilos con el framwork YUI.
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
form, fieldset, input, textarea, p, blockquote, th, td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-weight: normal;
font-style: normal;
}
ol, ul {
list-style: none;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-size: 100%;
}
q:before, q:after {
content:'';
}
abbr, acronym {
border: 0;
}

Reset de Ateneu
Publicado en un tutorial llamado Maestro CSS: Destripando estilos tomando a partir
de este reconocimiento por programadores de sitios y pginas web.
html, body, div, span, applet, object, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
address, big, cite, code, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt,
var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus { outline: 0;}
a, a:link, a:visited, a:hover, a:active { text-decoration: none }
table { border-collapse: separate; border-spacing: 0; }
th, td { text-align: left; font-weight: normal; }
img, iframe { border: none; text-decoration: none; }
ol, ul { list-style: none; }
input, textarea, select, button { font-size: 100%; font-family: inherit; }
select { margin: inherit; }
hr { margin: 0; padding: 0; border: 0; color: #000; background-color: #000; height: 1px }

Adems de los anteriores, podemos encontrar muchos otros reset.css que suelen ser
utilizado por los programadores entre ellos podemos destacar:
Reset de Chris Poteet
/*
Reset Default Browser Styles
- Place first in the listing of external style sheets for cascading.
- Be sure to explicitly set margin/padding styles.
- Styles are not reset that have to do with display (block, inline) are not reset.
By: Chris Poteet & various influences
*/
*{
vertical-align: baseline;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: none;
padding: 0;
margin: 0;
}
body {
padding: 5px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
margin: 20px 0;
}
li, dd, blockquote {
margin-left: 40px;
}
dt {
font-weight: bold;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

Reset de Tantek Celik

:link, :visited { text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6, pre, code { font-size: 1em; }
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input {
margin: 0;
padding: 0;
}
a img, :link img, :visited img { border: none; }
address { font-style: normal; }

Normalize.css
Cuando se decide hacer una pgina Web y se realiza el diseo de la misma, por
consiguiente el maquetado, se resuelve que todos los elementos tienen que estar en el sitio
exacto, con la medida exacta, y en todos los navegadores se tiene que ver igual, nos
encontramos que es verdaderamente imposible, para ellos una solucin distinta al reset.css
es el normalize.css.
El normalize.css es un normalizador de cdigo CSS multiplataforma, compatible con
todas las funciones HTML5. Es una CSS customizable, con la que se puede renderizar
nuestra css en todos los navegadores de una manera ms consistente con los ms
actualizados estndares de clases.
Este archivo CSS permite lograr una normalizacin de estilos que vienen definidos por
defecto en cada uno de los navegadores web, siendo de esta manera un recurso para
desarrolladores front-end con el objetivo de lograr al programar un sitio o pagina web se vean
iguales, casi independientemente del navegador desde el que se acceda, simplemente
agregando un valor determinado a cada etiqueta que no ha sido nombrada en el style.css.
Esto es porque solamente trata las diferencias entre navegadores para conseguir el objetivo
que es normalizar la CSS. Alternativa al tradicional reseteado de todos los estilos que
logramos hacer con reset.css, Normalize.css aplica a todas las etiquetas un estilo por
defecto.
Se podra decir que normalizar el CSS es una alternativa actualizada de reset.css que
cuenta con caractersticas particulares tales como:

Conservar lo ms usado por defecto, como muchos resets CSS.

Normalizar estilos con un amplio rango de elementos HTML.
Corregir errores y las inconsistencias ms comunes de los navegadores.
Mejorar la usabilidad con arreglos para la consistencia.
Explicar lo que el cdigo hace usando comentarios detallados en el archivo .css.

La versin 2.0.1 del normalize.css fue liberada y se puede descargar con una licencia
MIT y la misma es usada en proyectos importantes como Bootstrap, Twitter, HTML5
Boilerplate, NASA, Rdio, Digg, GOV.UK, iA, CSS Tricks, etc.
Comparando CSS Reset y normalize.css se puede decir que el CSS Reset redefine
todos los atributos de los objetos HTML (div, body, strong, etc.) para que tengan el mismo
aspecto en todos los navegadores, dndoles un valor para que el navegador no utilice los
valores que le asigna cada navegador por defecto.
Esto en principio logra que las pginas Web se muestren por defecto iguales o bien
similares en todos los navegadores Web. Por ello, se carga primero el cdigo del CSS Reset
y despus se definen las propiedades CSS del proyecto a realizar, as nos aseguramos de

tener los mismos valores de base en todos los navegadores, de esta manera no sera
necesario por ejemplo especificar un margin, padding y border de 0 para cada clase que
definimos.
En cambio, el normalize.css lo que hace es normalizar la forma en que los
navegadores muestran un contenido. Es decir, no resetean o redefinen los diferentes estilos
de cada uno de los navegadores, sino que hace que todos los navegadores utilicen el mismo
estilo por defecto, tratando solamente las diferencias entre navegadores para conseguir el
objetivo que es normalizar la CSS.

Recomendaciones al agregar CSS Reset en una pagina o sitio Web

Se puede incluir CSS en un documento HTML de tres formas distintas:

Incluir CSS dentro del documento HTML

Incluir CSS en las etiquetas HTML
Incluir CSS desde un archivo externo

Incluir CSS dentro del documento HTML

Para incluir CSS dentro del documento HTML hacemos uso de la etiqueta <style>, la
cual estar incluida dentro de la etiqueta <head>. El inconveniente de definir CSS dentro del
mismo documento es que si ocupa un mismo estilo en diferentes documentos HTML, a la
hora de que se pretende realizar algn cambio se debe hacerlo en todos los documentos
HTML sin poder reutilizar el cdigo programado.
Ejemplo:
<html>
<head>
<style type="text/css">
p { color: blue; font-size:15px; font-family:Arial; }
</style>
</head>
<body>
<p>CSS Reset</p>
</body>
</html>

Incluir CSS dentro de la etiqueta HTML

Se puede incluir CSS dentro de la misma etiqueta html mediante el atributo style.
Ejemplo:
<html>
<head></head>
<body>
<p style="color: blue; font-size:15px; font-family:Arial;">CSS Reset</p>
</body>
</html>

Incluir CSS desde un archivo externo

Otra forma de incluir CSS es definiendo en un archivo con todos los estilos que se
vayan a usar y se guardan con la extensin .CSS, Una vez que se tiene el archivo creado se
enlaza mediante la etiqueta <link>
Ejemplo:
Archivo: reset.css
p { color: blue;
font-family:Arial;
font-size:15px;
}

Archivo: pagina.html
<html>
<head>
<link rel=stylesheet type="text/css" href=reset.css>
</head>
<body>
<p>CSS Reset</p>
</body>
</html>

Se debe tener en cuenta que al usar CSS Reset se est volviendo a cero ciertos
parmetros CSS que ya vienen por defecto configurados de forma diferente en cada
navegador.
Por ello el primer cdigo CSS que se debera utilizar es aquel que tiene Nuestro CSS
Reset para asegurar que todas las propiedades tomaran los valores por defecto antes de
utilizar el estilo con el cual se realizar el maquetado de cada pagina o bien del sitio Web.
Aunque se podra incluir el cdigo CSS en nuestro archivo HTML, siempre es
aconsejable incluirlo en un archivo aparte y conectarlo al HTML. Por otro lado, se sugiere que
los archivos CSS, se encuentren organizados en directorios o carpetas aparte dentro del
sitio. Esto permitir reutilizar los archivos CSS o bien el archivo CSS Reset en el resto de las
paginas que existan en el sitio Web.
Si se decide codificar un CSS Reset propio se debe tener en cuenta que es
fundamental mantener la hoja de estilos lo ms simple y corta posible, vindose esto
reflejado en un tiempo de carga ms reducido y en la facilidad a la hora de actualizar o
modificar el CSS.

Referencias pginas y sitios Web consultados

http://codigoadicto.com/8-metodos-utilizados-de-css-reset
http://comudo.blogspot.com.ar/2010/02/que-es-el-reset-css.html
http://es.wikipedia.org/wiki/Reset_CSS
http://librosweb.es/css_avanzado/capitulo_2.html
http://www.cssblog.es/10-tecnicas-para-resetear-css/
http://www.desarrolloweb.com/de_interes/normalize-css-normalizador-codigo-css7930.html
http://www.esandra.com/recopilacion-de-los-mejores-css-resets/
http://www.psdahtmlpasoapaso.com/blog/acortar-hoja-de-estilos-css-propiedadesshorthand
http://www.psdahtmlpasoapaso.com/blog/tips-css-para-mejorar-tu-sitio-web
http://www.tutosytips.com/css-reset-que-es-y-como-utilizarlo/