Con este post, inauguramos una serie de capítulos para aquellos que estéis interesados en conocer unos truquillos de CSS que os pueden ser muy útiles a la hora de preparar y diseñar vuestros proyectos web.

Deduzco que quien esté interesado en esto ya conocerá mínimamente para que se utilizan las CSS, las maravillas que nos permiten hacer y porque se han impuesto tan rápidamente frente al diseño basado en tablas que antiguamente utilizábamos. La CSS o hoja de estilo nos permite separar lo que es el contenido gráfico de nuestra página respecto al código HTML, PHP, ASP, etc, lo que nos ayuda enormemente a separar la faena.

Un ejemplo muy claro lo podemos ver en los millones de blogs que rondan por medio mundo basados en WordPress (cómo este mismo de Ateneu Popular), usan una misma tecnología, una misma base, pero entre ellos son completamente diferentes gracias a los diferentes estilos.

Por muy perfecto y bonito que sea trabajar una página con estilos y veamos que resulta super fácil y sencillo cualquier cambio gráfico en nuestra web sin tocar para nada de programación, las hojas de estilo pueden acabar por volvernos loco a la que intentemos probar según que cosas que con las antiguas tablas lo hubiéramos solventado en medio minuto. Un consejo que os doy es que seáis muy metódicos, que os busquéis vuestro propio estilo y que no sigáis siempre a pies juntillas los consejos que leáis por ahí, pues al fin y al cabo sois los pintores CSS de vuestro lienzo web y el resultado podrá gustar más o menos, pero el manejo de los lápices y pinceles (la estructura de vuestra hoja de estilos) y en definitiva la metodología a seguir, es vuestra y solo vuestra.

En este primer capítulo os hablaré de cómo empezar bien una hoja de estilos, cómo poner vuestra CSS a cero.

Las CSS son caprichosas y los navegadores lo son más. El problema de un diseño web es asegurarte  que se verá bien en todos lados, sea cual sea el navegador, versión y plataforma sobre la que se ejecuta. Se intenta desde hace años que todo sigan una especie de estándar de comportamiento al que poco a poco parecen llegar, pero no es tarea fácil y de momento parecen dispuestos a hacer que los diseñadores nos rompamos los cuernos con truquitos y tonterías para que todos lo vean igual (con el tiempo aprendereis a odiar a I.E.)

Un buen truco y manera de empezar, es resetear la CSS para evitar que cada navegador de por hecho algunos estilos que si no se definen aparecen así porque sí, y creedme que agradeceréis dejarlo a 0 cuando, por ejemplo,  veáis que vuestros titulares <h1> dejan demasiado espacio respecto al párrafo siguiente y no entendáis porque es. Si buscáis por internet encontrareis unos cuantos de estos reseteadores, yo aquí os dejo los que para mi tienen más utilidad y al final os dejo unos enlaces a título de bibliografía (weblografía en este caso) para que consultéis más:

/*Borramos para casi todos los tags conocidos por el hombre cualquier margen, espacio, interlineado extraño, bordeados, etc… empezaremos desde cero*/
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;
}

/*Quitamos cualquier efecto predefinido sobre enlaces cuando tienen el foco y nos olvidamos de los enlaces subrayados*/
:focus { outline: 0;} /*Actualización: Como bien me recuerdan, aclarar que este cambio de estilo debe hacerse siempre que vayamos a remarcarlo de otra manera, pues de no hacerlo tenedremos problemas de accesibilidad a nuestra página */
a, a:link, a:visited, a:hover, a:active{text-decoration:none}

/*Para tablas y sus casillas de salida las dejamos con celdas separadas, que los textos se alinean a la izquierda y eliminamos la negrita para campos tipo <td>*/
table { border-collapse: separate;border-spacing: 0;}
th, td {text-align: left; font-weight: normal;}

/*Eliminamos el border en imágenes o iframe aunque formen parte de un enlace*/
img, iframe {border: none; text-decoration:none;}

/*De salida nada de símbolos raros para nuestros listados*/
ol, ul {list-style: none;}

/*Para variables típicas de formulario usaremos la tipografía que definamos expresamente y al tamaño que definamos*/
input, textarea, select, button {font-size: 100%;font-family: inherit;}
select {margin: inherit;}

/*Convertimos el <hr> en una linea simple*/
hr {margin: 0;padding: 0;border: 0;color: #000;background-color: #000;height: 1px}

Como os he dicho se pueden añadir muchos más pero para mi estos son los que suelo utilizar.
Con esto conseguimos una base limpia, como un lienzo sin arrugas, sobre la que empezaremos a trabajar controlando por completo cualquier estilo de nuestra web.

Weblografía:

• CSS Inicial de Christian Montoya
• CSS Inicial de Mike Rundle
• CSS Inicial de PigMag
• CSS Inicial de Rudeworks
• CSS inicial de Anieto2k
• CSS Inicial de CSSLab