[forCode]

Creación de un Login Form III: Reseteando estilos

Ya tenemos el HTML y unos estilos para nuestro formulario; ahora veremos porqué es importante tener un reset.css en nuestro proyecto.

Creación de un Login Form III: Reseteando estilos

Una vez tenemos ya el HTML de nuestro formulario y lo tenemos bien maquetado, Ahora nos toca descubrir para qué sirve el fichero reset.css en un proyecto, y porqué es importante.

Situémonos

Como visteis en la cabecera del HTML, os hicimos spoiler de lo que vendrán en los siguientes pasos. Hoy, hablaremos del fichero reset.css.

<head>
  <!-- ... -->
  <!-- CSS -->
  <link rel="stylesheet" href="css/reset.css" />
  <link rel="stylesheet" href="css/styles.css" />
  <!-- ... -->
</head>

¿Para qué sirve y porqué es tan importante tenerlo en nuestros proyectos?

De manera nativa, todos los navegadores añaden estilos base muy minimalistas a nuestras páginas. Por ejemplo, suelen añadir margenes al tag <body> o un margin left, top y bottom a los <ul>. ¿Os suena la típica bolita que aparece a la izquierda de un listado? ·; esto también lo añaden por defecto los navegadores.

Pero lo curioso, es que cada navegador suele tener sus estilos peculiares para cada elemento; con lo que podría pasar que maquetemos algo y que se vea diferente en cada uno de ellos.

Es aquí donde entra en acción nuestro reset.css. Se trata de definir los estilos que tendrán nuestra aplicación en todos estos elementos nativos; y que cuando maquetemos, partamos de los mismos valores en todos los navegadores. En otras palabras, nos evitaremos algún que otro dolor de cabeza.

Sin más, os dejamos el código CSS de nuestro reset.css.

Fichero reset.css

/***** RESET *****/

/*
    author: forCode
    url: www.forcode.es
*/

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: &#039;&#039;;
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

a {
    text-decoration: none;
}

Si tenéis alguna duda al entender el lenguaje CSS, no dudéis en preguntar, se os responderá lo más pronto posible. En el próximo post, os haremos llegar el fichero animate.css, para dar un toque más interactivo y próximo al cliente.

Creación de un Login Form

Compartir en: