Minicápsulas

CSS Reset es una técnica para inicializar todos los estilos que vienen por defecto con los navegadores (margenes, alineaciones, alto de las lineas, tamaños de letra, etc.). La técnica consiste en eliminar completamente los estilos predefinidos por el navegador para luego empezar a trabajar con una hoja de estilos en blanco.

Una vez inicializados o reseteados los estilos, podemos empezar a construir los estilos con la garantía que serán mucho mas consistentes. Hay muchas técnicas para realizar esta eliminación de estilos, desde los muy sencillos hasta los muy completos.

Reset Básico
Consiste en utilizar el selector universal para el padding y margin de todos los elementos html. Es la técnica mas usada por la mayoría de los desarrolladores.

   * {
      padding: 0;
      margin: 0;
   }

Reset Universal Básico
Esta técnica consiste ademas de eliminar el padding y el margin, eliminar los estilos de las fuentes, los bordes y las alineaciones.

   * {
       vertical-align: baseline;
       font-weight: inherit;
       font-family: inherit;
       font-style: inherit;
       font-size: 100%;
       border: 0 none;
       outline: 0;
       padding: 0;
       margin: 0;
   }

Eric Meyer’s CSS Reset
Esa un tecnica desarrollada por Eric Meyer en Reset Reloaded y basado en YUI Reset CSS con algunas modificaciones. Esta técnicas es una de las mejor logradas y que resuelven la mayoría de problemas de estilos.

 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: "" "";
 }

Hay que notar que no se utiliza el selector universal y el su lugar se listan todos los elementos a los que deseamos se aplique el reset, además de ello se eliminan los estilos de las listas, entre otros. Lo recomendable es guardar estas reglas en una hoja de estilos llamada reset.css e incluirlos en nuestro web antes de incluir los estilos propios del web.

Si eres diseñador gráfico, también debes aprender algunas cosas sencillas sobre escribir código o si simplemente eres nuevo en esto del diseño web, la siguiente lista te va ser muy útil, se trata de 11 sitios donde puedes aprender HTML o mejorar tus conocimientos, esta lista fue hache por el blog 1st Web Designer.

1. HTML Dog
2. W3Schools
3. HTML Code Tutorials
4. HTML Goodies
5. Tizag Tutorials
6. HTML Playground
7. Your HTML Source
8. EchoEcho
9. Davesite
10. BraveNet
11. AListApart