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 u hoja de estilos nos permite separar lo que es el contenido gráfico de nuestra página respecto al código HTML, 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, 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 aprenderéis 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 tendremos 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.

En el primer capítulo hablamos de una útil y buena práctica antes de entrar de lleno a crear nuestra CSS, resetear los estilos. En esta segunda parte y antes de entrar de lleno a destripar uno por uno los estilos que podemos usar quiero centrarme en algo muy importante y vital para no tener que estar luego poniendo parches para incluir cosas nuevas en nuestra página, la estructura.

Lo primero que tenemos que tener claro antes de empezar a hacer nuestra página es el resultado final, saber que queremos mostrar y como queremos hacerlo, una tarea que puede parecer sencilla, pero que de estar mal planteada os dará más de un quebradero de cabeza. Si la web es personal, cuando el día de mañana queráis implementar algo no os importará ponerlo unos pixels mas abajo si es la manera más sencilla de hacerlo, controlareis el tamaño de vuestras imágenes y si un titular debe entrar en dos lineas de texto para que no descuadre, nunca escribiréis tres. Pero si hablamos de un cliente… amigos la cosa da un giro de 180 grados, piensa en lo peor que pueden hacer, porque lo harán.

Definir una buena estructura es esencial, básico y todos los adjetivos sinónimos que queráis usar. Aquí os doy una serie de consejos.

Que debo tener en cuenta?
Principalmente debes tener claro el medio en el que trabajas. Una página web es navegable, no hace falta meter toda la información en una misma y kilométrica página. El usuario debe poder moverse por ella, experimentar y descubrir, pero nosotros debemos controlar siempre en cierta manera esta navegabilidad, marcarle y facilitarle un camino lógico para que siga el orden que nos interesa. Si quiere salirse de este camino, eso ya es su problema.
En segundo lugar intenta hacerte con todo la información que necesitas para hacer la web, siempre que puedas solicita todo el material antes de mover un solo dedo. Nuestro cliente debe tener claro que es lo que quiere, que secciones le interesa destacar, que información desea dar en cada una de ellas, que tipo de imágenes desea utilizar… el cliente debe tener una estructura mental formada de lo que desea y si estáis lo bastante rodados ya le ayudareis vosotros a perfilarla aportándole ideas y un enfoque nuevo a los puntos flojos de su estructura fruto de vuestra experiencia personal.

Debo avisaros que en este punto os encontrareis las mayores sorpresas, desde clientes que tiene clarísimo que es lo que quieren y da gusto oírlos, hasta absolutos “especímenes” que hacen una web porque queda mas bonito en la tarjeta e igual así incluso desde China se animan a llamarlos para comprar, como esto de internet se ve en todo el mundo… No os parezca extraño, yo mismo he realizado más de una web con 5 secciones solo teniendo clara una cosa, la dirección postal y teléfono del “espécimen”.

Como empiezo?
Pues siguiendo la misma metodología que como lo harías cuando te piden que diseñes un logo, dibujes una mascota o montes un anuncio. Usa el lápiz y papel, una pizarra, el Photoshop, Freehand, el Paint de windows o lo que te haga sentir más cómodo, simplemente sigue el mismo método que apliques siempre y simplemente diseña la página.

Ya tengo claro lo que quiero, como lo transformo en CSS?
Supondremos una página super sencilla con los siguiente elementos:
• Cabecera con el logo de la empresa (la llamaremos “cabecera”, como si fuera un periódico)
• Links de las diferentes secciones (los “enlaces”)
• Contenido de cada sección (a este lo llamaré “cuerpo”)
• Copyright, registro mercantil y aviso legal (y a este “pie”)

La gran ventaja de trabajar con capas es que puedes tratar la web como si de una plancha de corcho se tratara y en la que irás enganchando todos los elementos. La plancha de corcho se llama <body> y dentro pondremos nuestra primera capa <div> a la que podéis llamar como queréis pero en medio mundo suelen llamarla container o contenedor.

NOTA: Para aquellos que no lo sepáis las capas se identifican de dos formas, con id o con class. El uso es más o menos indistinto, si bien el manual de buenas maneras identifica las capas ID como capas únicas que no se repiten en una misma página, mientras que las del tipo CLASS podemos usarlas más de una vez. En ocasiones puede que tengamos que usar CLASS para una capa cuyo ID necesitemos para otra cosa (javascript, jQuery, etc).

Este contenedor nos permitirá editar siempre que queramos nuestra página entera, ya sea para moverla a izquierda o centro, hacer más estrecha o ancha el área de información, etc. Es la capa madre que engloba a todas las hijas y cualquier cambio sobre esta afecta a las hijas.

A partir de este punto ya podemos poner el resto de capas dentro del contenedor.

Esto traducido a lenguaje HTML sería:
<div id=”contenedor”>
<div id=”cabecera”></div>
<div id=”enlaces”></div>
<div id=”cuerpo”></div>
<div id=”pie”></div>
</div>

Como veis los dos diseños tienen la misma estructura y será la CSS la que nos marcará el diferente diseño.

A la hora de ordenarlo seguimos el orden lógico en los dos casos, un contenedor que lo engloba todo y dentro del cual esta primero la cabecera, después los enlaces, el cuerpo y finalmente el pie. Para el segundo caso de estructura, el orden entre enlaces y cuerpo podría ser indistinto, pero si nos guiamos por el sistema occidental de lectura lo correcto es ir de arriba a abajo y de izquierda a derecha, no?

Y ya está?
Bueno ahora habría que definir la hoja de estilos, decirle a cada capa como debe comportarse y cómo debe hacerlo su contenido, etc. Además este es un ejemplo demasiado sencillo, normalmente os encontrareis cosas bastante mas complejas de estructurar, así que os recomiendo tomaros vuestro tiempo y estudiarlo siempre muy bien antes de poneros manos a la obra porque los problemas surgen siempre demasiado tarde y cualquier cambio puede hacerse muy costoso. Para que os hagáis una idea, en el caso 2 de nuestro sencillísimo ejemplo incluso os diré que no estaría de mas incluir una nueva capa que englobara los enlaces y el cuerpo. ¿Porqué? Ese será otro capítulo.

Siguiendo con esta guía CSS, llegamos al último de esta introducción antes de entrar propiamente en materia. Ya en el capítulo anterior hablamos de la importancia de tener clara la estructura de nuestra web antes de iniciar cualquier paso, y es que a partir de ahora debemos ser capaces de pensar únicamente en capas, descomponer nuestro diseño web en diferentes trozos que puestos a diferentes niveles conforman el total de nuestra página, tal cual como si estuviéramos trabajando con Photoshop, Gimp o cualquier programa que nos permita usar diferentes capas para crear nuestra composición final.
Pero como el movimiento se demuestra andando, vamos a ver una serie de ejemplos que os pueden ayudar a ver mejor todo esto, y como debe hacerse aplicado al diseño web. Antes que nada, permitirme que os recomiende particularmente un extensión para Firefox que va de perlas: Web Developer [ descargar ]. Con esta extensión, entre otras muchas cosas, podréis ver y modificar online las CSS de otras paginas para ver que efectos producen, os permitirá ver las capas utilizadas en una web, formularios, tablas, activar o desactivar las imágenes, etc. Para los que uséis Internet Explorer, primeramente id a la página web de Mozilla, descargar Firefox y seguidamente instalar la extensión.

Bien, demos paso al ejemplo, vamos a destripar tres webs:

Nota: Las webs seleccionadas sirven únicamente de ejemplo para ilustrar el tema que se trata. Los nombres de las capas y la estructuración de la página pueden no corresponder exactamente a la seguida en dichas webs.

En el primer ejemplo vemos una estructura que destripada resulta bastante sencilla, donde la complejidad reside en esas cuatro cajas de texto colocadas como en 4 columnas. Para conseguir esto (y hasta que no se implemente próximamente con la CSS3) lo que haremos es flotar cada capa para colocarla junto a la anterior. Una buena práctica siempre que flotemos capas es incluirlas todas dentro de una capa para evitarnos problemas (en este caso nuestra capa cuerpo). Cuando estudiemos la clase float lo veremos en mayor profundidad, pero de momento fiaos de mi palabra.

En el segundo caso estamos de nuevo con lo mismo que en el primero y las capas flotantes. Aparentemente parece que pudiera tratarse de un diseño de tres columnas, y que con tres capas flotando una junta a otra los podríamos solventar. La verdad es que no es mala idea hacerlo, pero lo mejor para casos en que el contenido pueda ser variable y si no queremos tener problemas de descuadre (sobretodo entre navegadores), lo podemos solventar de una manera sencilla, que es flotándolas de dos en dos, es decir y para este caso, flotamos la capa1 respecto a la capa2 y capa3 juntas y luego flotamos la capa2 respecto a la capa3. Suena un poco lío, pero lo entenderéis mejor revisando los ejemplos de arriba.

En el tercer y último caso podríamos decir que es una combinación de los dos anteriores llevada al extremo. Digamos que a nivel estructural, ya no hay más que esto. Podréis tener que flotar más capas, pero si sabéis estructurar un caso como este, ya tenéis mucha parte solventada.

Mi consejo es que practiquéis mucho, que estructuréis a vuestra manera y con vuestros nombres otras webs, que naveguéis por el código CSS de diferentes webs y os miréis bien como están estructuradas, como han solventado la puesta en escena de los diferentes elementos, como han traducido su diseño del papel a la web, porque no todo el mundo lo hace de igual forma y posiblemente vosotros acabéis encontrando vuestro sistema con el que os sentís mas cómodos y que acaba siendo vuestra señal de identidad.

El diseño de una web no es sólo saber combinar los colores para que sea más o menos bonito, en la web entran muchos factores entre los que está el diseño visible, la navegabilidad, la facilidad de encontrar la información y que la estructura del código también sea clara para que cualquier modificación futura no se convierta en una odisea.

En los anteriores capítulos planteamos un poco la puesta en escena del trabajo, los planteamientos previos antes de ponernos a estilizar nuestra web, Ahora ya vamos a entrar un poco en materia hablando propiamente de como crear nuestra idea en CSS. En esta ocasión hablaremos de los selectores y de las diferentes maneras de llamar a nuestra CSS desde la página.

Selectores
Los selectores CSS son el corazón de todo y definen cual será el elemento del HTML que nosotros manipularemos desde el código CSS. La forma típica de hacerlo es la siguiente:
• selector{ propiedad:valor;}
Principalmente pueden ser de dos tipos (como ya comentamos en el primer capítulo) cuando pretendemos estilizar los diferentes elementos de nuestra página, del tipo ID o del tipo CLASS. La diferencia de utilización entre uno y otro radica en que los ID son selectores únicos en una página y que no se repiten, mientras que los tipo CLASS pueden ser usados más de una vez en una misma página, aunque no pasará nada por usar un ID más de una vez.

Para identificarlos entre uno y otro desde el código CSS se utilizar los símbolos “#” o “.” quedando:
• #selector (para las capas ID)
• .selector (para las capas CLASS)
También podemos modificar selectores que no sean de ninguno de estos tipos, sino que afectan directamente a tags propios del HTML que queramos editar. En ese caso pondremos el tag sin ningún tipo de símbolo que lo preceda:
• p{propiedad:valor;}
• body{}
• a{}
• hr{}
• …

A la hora de montar la estructura de la CSS cada uno utiliza sus trucos o su forma de hacer, como puede ser separando entre diferentes archivos según la función de cada uno (uno para los estilos generales, otra para los referentes a secciones concretas de la web, …), otros usan un mismo archivo pero lo estructuran con comentarios y dobles separaciones.

Nota: Para añadir comentarios que nos ayuden a movernos mejor por nuestra CSS se utilizan los signos /* para iniciarlos y */ para cerrarlo, quedando: /* esto es un comentario */

A mi personalmente me gusta más utilizar los comentarios para no tener que ir abriendo diferentes CSS cada vez que quiera realizar una modificación (en casos especiales si que uso más de una: las especificaciones de un menú javascript concreto, para crear una css diferente para un menú de administración, para estilos concretos de un apartado puntual que se abre en ventana aparte, etc).

Además también me gusta presentar la información de los selectores en una misma línea para reducir espacio y aclararme mucho más a la hora de buscar algo.

#estilo1{
color:#ffffff;
font-size:12px;
margin:10px;
padding:5px;
font-weight:bold;
}
#estilo1{color:#ffffff; font-size:12px; margin:10px; padding:5px; font-weight:bold;}

Las dos formas son válidas pero la costumbre ha hecho que me guste y me sea más sencilla la segunda. El tiempo decidirá cual es la que mejor os va a cada uno.

CSS interna, externa y en línea
Hay tres maneras de llamar a nuestra CSS y ninguna es más correcta que otra pero si es cierto que hacerlo de forma externa nos ayudará mucho más a separar nuestra parte propia de programación de la del diseño.

Para hacerlo de forma interna pondremos nuestro código dentro del tag <style type=”text/css”></style> y preferentemente dentro del HEAD de nuestra página.

…
<head>
<style type=”text/css”>
body{ background-color:#ccff00;}
</style>
</head>
<body>
…

Para hacerlo de forma externa lo que haremos de definir nuestros selectores en un archivo que guardaremos con extensión “archivo.css”. Y desde nuestra página web llamaremos a nuestro archivo de la siguiente manera.

<head>
<link rel=”stylesheet” type=”text/css” href=”archivo.css” />
</head>

Nota: Para este caso debemos tener clara una cosa y es la ruta hacia nuestro “archivo.css”. Personalmente suelo poner mis archivos CSS dentro de una carpeta llamada CSS para estructurar mejor y encontrar con mayor facilidad cada cosa en el servidor. Para este caso el HREF deberá reflejar esa ruta css/archivo.css. Además hay que tener claro que lo que hacemos es llamar a la CSS y NO IMPORTARLA, algo que debemos recordar sobretodo a la hora de usar las imágenes en nuestro archivo.css, puesto que la ruta de estas es siempre relativa al archivo.css que la contiene y no al archivo .htm, .php o lo que sea.

La forma de hacerlo en línea es incluir directamente cada estilo en el tag HTML de la siguiente manera:
…
<body>
<div style=”font-size:10px; color:#000000”>Esto es una estilo en línea</div>
…

Como ya he dicho anteriormente ninguna forma es más correcta que la otra y el resultado será el mismo a nivel visual, si bien es cierto que si queremos respetar el manual de buenas maneras lo correcto es separar el código base del diseño, pues a la hora de hacer cambios nos facilita muchísimo la faena y sólo cambiando una CSS por otra podremos editar por completo la apariencia de nuestra la web.

Siguiendo un poco más la información sobre los selectores que tratamos en el anterior post, esta vez vamos a ampliar un poco como usarlos y como referenciar correctamente a los diferentes elementos de nuestro código HTML desde la CSS para poder aplicarles el estilo que deseemos.

Para hacerlo más clarificador pondremos primero (en color anaranjado) como se escribiría nuestro selector en la CSS y luego explicaremos a que hace referencia.

Nota: El uso de id (#) o class (.) es indistinto y en los siguientes ejemplos es a título informativo. Las siguientes especificaciones son para CSS 2.1, por lo que determinadas versiones de navegadores pueden no aceptar algunos de estos selectores.

• #e1{}
Forma más básica. Con esta instrucción definimos los estilos para nuestro elemento cuyo identificador es e1: <div id=“e1”></div>
• div.e1{}
Selector para definir los estilos que afectarán a aquellos elementos <div> cuya clase sea e1: <div class=“e1”></div>
A diferencia del primer caso expuesto, este sólo afectaría a elementos tipo <div>, mientras que en el ejemplo primero, podríamos usar la misma especificación id=“e1” en un <table>, en un <p>, etc.
• #e1 #f1{}
De esta manera vamos a especificar los estilos para nuestros selectores f1 que estén contenidos dentro de un selector e1: <div id=“e1”><div id=“f1”></div></div>
Esta especificación NO afectaría nunca a aquellos selectores f1 que no estén contenidos dentro de e1
• #e1,#f1{}
Separados por comas, estamos aplicando los mismos estilos tanto para los id=“e1”, como para los id=“f1”.
• div.e1:first-line{}
Afectaría a toda la primera linea de una capa los div cuya clase fuera e1. Se usaría por ejemplo para remarcar la primera línea de un texto.
• div.e1:first-letter{}
Hace la misma función que el anterior pero en este caso no afecta a toda la primera línea, sino exclusivamente a la primera letra: Sería algo parecido a lo que se realiza en muchas publicaciones de periódicos donde la primera letra del texto aparece muy remarcada (incluso con un cuerpo 5 veces mayor al del texto).
• a:link{}
Una de las más utilizadas y sirve para aplicar propiedades a enlaces no visitados.
• a:visited{}
Si la anterior era para enlaces no visitados, esta es para los enlaces visitados.
• a:hover{}
En este caso serían los estilos cuando estamos sobre el elemento, como para destacarlo. A diferencia del :link y el :visited, la propiedad :hover no es exclusiva de los enlaces y se puede aplicar a otros tags diferentes, como por ejemplo a un <tr> cuando nos interesa que al posicionarse sobre él se destaque toda una columna en un color distinto.
Mucho ojito con es uso de esta propiedad para otros elementos no enlaces y el maravilloso I.E., pues según la versión puede que no haga lo que deseemos.
• a:active{}
Estilos para un botón cuando esta activado (tiempo entre que se pulsa un botón y se suelta). Como en el caso del hover, esta propiedad no es exclusiva de los enlaces.
• input:focus{}
Estilo que se utiliza para cuando un elemento tiene el foco, como sería el caso de cuando queremos aplicar un estilo diferentes a un campo <input> de formulario cuando lo marcamos para rellenarlo.
• #e1:before{}
Instrucción para aplicar un contenido antes de un elemento cuyo identificador es e1
• #f1:after{}
Exactamente como el anterior pero en este caso aplicamos contenidos tras los elementos identificados con f1.
• input[type="submit"]{}
En este caso el estilo lo aplicaríamos a todos los <input> de nuestra página cuyo atributo type sea submit (p.e. para darle estilo al botón de enviar de un formulario). Se utiliza esta forma poniendo el atributo que define al elemento dentro de corchetes para marcar a que elemento queremos dar estilo. Debo advertir que para según que versiones de I.E. hay que ir con cuidado con esta función porque puede no funcionar.

A partir de esta base podemos hacer selecciones a priori complicadísimas para definir el estilo de una parte concreta de nuestra web.

Pongamos por ejemplo que tenemos marcado un listado de puntos del tipo <ul><li> que heredan el estilo general definido en la página para estos listados,pero queremos darle un estilo especial a uno de estos listados para cambiarle el color y destacar en concreto esos puntos. Lo ideal sería aplicarle una clase nueva a este <li> y definirla en nuestra CSS pero en ocasiones puede ocurrir que no podamos modificar el código por alguna razón o simplemente que gracias a conocer “como llegar hasta allí” no necesitemos hacerlo. Para este caso lo complico un poco mas y pongo este listado dentro de una tabla:

• div#div1 table.comentarios td ul li{ color:#ffcc00;}
En este caso estamos diciéndole que nos modifique el color de los elementos <li> contenidos dentro de una lista <ul> que se encuentran dentro de una tabla cuya clase es “comentarios”, y que a la vez se encuentra dentro de un <div> cuyo identificador es div1.

Aunque pueda parecer complicado se trata de seguir como una especie de camino de migas hasta llegar al sitio concreto que queremos modificar. Toda una tarea de investigación en según que casos.