Por si aún no lo tenéis claro, CSS es un lenguaje que se utiliza para aplicarle estilos al contenido de nuestras páginas web. ¿Qué significa eso de dar estilos? Muy sencillo, dar estilos significa poner bonita una página. Especificarle un tipo de letra, su color, su tamaño. Decir dónde se coloca cada bloque de textos, qué color de fondo van a llevar. Significa poner imágenes decorativas, bordes. En definitiva, todo lo que tenga que ver con el aspecto de una web se hace (o se debe hacer) mediante CSS.

A la hora de escribir todas las reglas que definirán todas estas cosas con las que pondremos bonita la web, se debe seguir una sintaxis concreta para que el navegador web pueda entender qué es lo que queremos decir con cada regla. Esta sintaxis está estandarizada por el W3C, y podéis leer todo lo que queráis sobre ella en el documento sobre CSS que tienen disponible.

La sintaxis de CSS es muy sencilla, sigue la siguiente estructura:

selector {
	propiedad: valor;
	propiedad: valor;
	propiedad: valor;
}

En el trozo de código anterior vemos como hay agrupadas entre unos símbolos de llave ({ }) una serie de pares “propiedad-valor”. Estas propiedades se corresponderían con todo aquello que queramos definir en lo referente a aspecto (color de fondo, tamaño de letra, etc.) y deben estar separados por el símbolo de dos puntos (:). Además, después del valor asociado a una propiedad debe colocarse el símbolo de punto y coma (;) para dar por finalizada la asignación de valores a la propiedad.

Esta agrupación de propiedades se aplicará sólo sobre aquellos elementos que coincidan con lo especificado en el selector. Pongamos un ejemplo para verlo más claro: Imaginad que queremos que los enlaces de nuestra web sean rojos y no estén subrayados.

a {
	color: red;
	text-decoration: none;
}

Como podéis ver he definidos dos pares “propiedad-valor” que determinan el color de letra que quiero, en este caso red para el color rojo, y que no se quiere subrayado. Estas dos propiedades se encuentran englobadas dentro de un grupo con el selector que especifica que sólo se aplicará a todos los elementos que sean A (enlaces) en nuestra página web.

A primera vista puede parecer muy sencillo, pero hay varios conceptos algo más complicados de los que hablaré en próximos “básicos”, como pueden ser todos los tipos de selectores que hay, la especificidad de los mismos, la aplicación de propiedades en cascada, etc.

Si observáis la hoja de estilos para esta iteración veréis que apenas hay unas pocas reglas en las que aplico la tipografía, algunos colores y muy poca cosa más. Pero todo lo que he definido en la hoja de estilos tiene su por qué.

Tipografía

Una de las primeras cosas que me gusta definir cuando comienzo a maquetar un diseño es su tipografía. En mi trabajo diario no soy yo el que define el tipo a utilizar, de eso se encarga el diseñador, y yo lo único que tengo que hacer es seguir sus instrucciones. Pero en este caso es distinto, porque el diseñador soy yo.

Para Colores Efímeros he decidido que la tipo a utilizar sea la famosísima Helvética. Siempre me ha parecido muy precisa, muy cuidada y sobre todo muy legible, que es de lo que se trata. Así que en mi hoja de estilos definí la siguiente regla relativa a la tipografía para el body completo:

font: 10px/1.6 Helvetica, Arial, sans-serif;

Es probable que a muchos de vosotros os parezca chocante que use un tamaño en píxeles para el tipo, ya que nuestro querido Internet Explorer 6 no es capaz de permitirle al usuario cambiar el tamaño del texto si está definido en esa unidad de media. Pero como Colores Efímeros es mi blog personal, he decidido que voy a darle un tratamiento especial a este navegador, así que no tiene importancia que use un tamaño fijo de tipo.

Según la regla anterior, además de decidir que quiero Helvética (y las demás por si se da el caso de que alguien no la tenga en su máquina), defino que quiero un tamaño base de 10px para el texto. Este número no es al azar, obviamente. Como en el interior del documento quiero usar unidades relativas de medida para (casi) todos los elementos, en concreto quiero usar em, me resulta mucho más fácil hacer los cálculos si sé de antemano que 1em equivale a 10px. Sobre todo teniendo en cuenta que más adelante quiero basar la maquetación del blog en base a una grilla elástica (hablando del tema, aquí os dejo un par de artículos de Rodrigo Galíndez sobre el tema: Diseño con grillas (formato PDF, 1.6 Mb) y Utilizando grillas (formato PDF, 2.4 Mb)).

Maquetación

Para controlar la maquetación de los elementos he necesitado englobar todo el contenido del documento en un <div id="wrapper"></div> con el que poder jugar para centrar el bloque de texto. Para hacerlo he usado la técnica de aplicarle un ancho concreto, y determinar que sus márgenes laterales sean automáticos:

#wrapper {
	margin: 0 auto;
	min-width: 640px;
	width: 64em;
}

Además de eso, y para asegurarme de que el ancho nunca sea menor de lo que considero adecuado, he definido un ancho mínimo con min-width de 640px, que se corresponden con los 64em si tenemos en cuenta que el tamaño base del tipo es de 10px.

clearfix

Algo que me gusta tener en todas mis hojas de estilos es el archiconocido clearfix. Este conjunto de reglas se utiliza para “limpiar” bloques que contienen elementos flotantes. ¿No entendéis un pimiento? Bueno, os lo explico en el siguiente gráfico:

En la figura de la izquierda, tenemos un div que contiene a otros dos elementos, uno flotando a la izquierda y otro a la derecha. Como nuestro div padre no tiene colocado el class="clearfix", no es capaz de “entender” que tiene dos elementos contenidos dentro de si. Se comporta como si los elementos flotantes no existieran y por tanto no ocupa el alto que debería. Imaginad que debajo hubiera texto, el resultado sería desastroso, los elementos flotados pisarían el texto y no quedaría nada bien.

Por el contrario, en la figura de la derecha, donde nuestro div sí tiene el class="clearfix", no ocurre nada raro, ya que al tenerlo colocado entiende que posee contenido flotante, y se ajusta a la altura del mismo, comportándose de manera lógica.

Hay otros sistemas para hacer esto mismo (clear: both, etc.), pero de entre todos ellos considero que el mejor es este, y por eso siempre lo tengo en mis hojas de estilo:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* HACK: Esconder de IE/Mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* FIN-HACK: Esconder de IE/Mac */

Ocultaciones

Otra de las cosas que siempre me gusta tener en mi hoja de estilos, y la de este blog no se escapa de tenerla, es una serie de reglas para ocultar elementos. Quizá os sorprenda, porque con un simple display: none; bastaría. Pero hay un problema con esta regla, con ella estamos ocultando los elementos sobre los que la usemos a los ojos de la gran mayoría de lectores de pantalla.

Y vosotros os preguntaréis: ¿Y a quién cojones le importan los lectores de pantalla? Pues tenéis razón, ni siquiera a mi me importan, dudo mucho que alguien vaya a entrar a mi blog con uno de ellos… Pero como no me cuesta absolutamente nada, uso las siguientes reglas para ocultar elementos:

.ocultar {
	height: 1px;
	left: -9999px;
	position: absolute;
	top: -9999px;
	width: 1px;
}

Captura de la iteración

Y de nuevo, para los visitantes que vengan del futuro y quieran ver cómo estaba el diseño del blog en la iteración número 02, aquí os dejo una captura.

• Iteración 02

Me explico: Como soy tan flojo y me da tanta pereza ponerme a diseñar algo que me guste y me convenza, lo que voy a hacer es empezar el blog sin diseño. Sin nada de diseño. Nada de CSS, nada de Javascript, y nada de XHTML estudiado y pensado. Voy a comenzar desde cero, como en cualquier otro diseño de los que me toca maquetar en la oficina, pero en este caso explicando en cada momento qué es lo que he hecho, y por qué. A modo de tutoriales, si queréis verlo así (aunque lo cierto es que para mi es una excusa con la que empezar el blog sin tener que comerme el coco sobre el diseño).

En esta primera iteración, lo que he hecho ha sido quitarle el CSS al tema por defecto de WordPress, el Kubrick. No he tocado nada de XHTML, no he añadido Javascript, no he traducido los textos… Y es así como voy a empezar. En la próxima iteración comenzaré modificando el XHTML, para obtener una estructura básica que me convenza semántica y estructuralmente hablando, y así iré avanzando en el diseño “en directo”.

Ni que decir tiene que aceptaré cualquier sugerencia que queráis hacerme, puesto que estoy convencido de que la gran mayoría de los que estéis interesados en seguir esta “aventura” sabéis mucho más de diseño y desarrollo web que yo mismo. También acepto consejos sobre WordPress, plataforma de la que no soy un gran conocedor.

Espero que disfrutéis leyéndome, al mismo tiempo que espero disfrutar yo escribiendo.