Wikitutorial de CSS (I): Introducción

"El nuevo número para las emergencias es 0118 999 881 999 119 725.. 3"

The IT crowd

1.- ¿Qué es el CSS?

Supongo que todo el mundo que haya llegado hasta aquí sabrá lo que son los Css. De todas formas, nunca sobra una buen definición. Css es, literalmente, una hoja de estilo en cascada. Su utilidad es bien simple: estructurar una página web sin necesidad de modificar cada una de las tags de html de la misma web. En una hoja de estilos, se van definiendo Ids que luego usaremos para la página web haciéndole una llamada. Ya veremos cómo se hace esto más adelante.

2.- ¿Dónde se coloca la hoja de estilos CSS?

El código de la hoja de estilos SIEMPRE estará entre las etiquetas <head> y </head> y, más concretamente, dependiendo de qué estés usando estará de una forma u otra:

En plantilla blogger: deberá ponerse de la siguiente forma: <b:skin><![CDATA[{hoja de estilos}]]></b:skin>

En plantilla blogger classic o website: habrá que ponerlo de la siguiente forma:
<style type="text/css">{hoja de estilos}</style>

El código se puede incluir de dos formas diferenciadas:

Escribiendo el código de la hoja de estilos en la misma página o plantilla (opción recomendada para blogs).

Editando la hoja de estilos en un archivo de texto aparte, apellidándolo con la extensión .css. Luego habría que subir el archivo a un ftp y llamarlo con la instrucción:
@import url({dirección url de la hoja de estilos});

3.- Definición de variables

Empezaremos por lo poco importante o útil: la definición de variables. Sólo he tenido constancia de este uso en plantillas bloggers como ésta y que no sirve para páginas webs. En cualquier caso, yo no lo echaría de menos. La definición de variables se ha de colocar en primer lugar de la hoja de estilos y tiene una estructura como ésta:

<Variable name="{nombre de variable}" description="{descripción}" type="{tipo}" default="{valor 1}" value="{valor2}">

Tal como indica, con esto se definen variables que luego más tarde pueden ser utilizadas en la definición de las Ids. Cada una de las partes de la variable definida son:

name: Como indica, es el nombre de la variable. No puede repetirse (si se repitiese no sé qué pasaría, supongo que al llamarla se escogería la primera variable definida). Es de vital importancia ya que, para llamar la variable más adelante, se ha de hacer con el código ${nombre de la variable}.

description: es la descripción de la variable. Sólo sirve para poner algún comentario sobre la misma, dejar claro para que sirve y demás.

type: es el tipo de la variable. Puede ser color, font, y es posible que se pueda definir algún tipo más, ya que no me sorprendería que se pudiesen declarar tamaños.

default & value: son los valores de la variable. La diferencia entre default y value no la tengo clara y por lo que he visto no creo que tenga mucha importancia. Así que opto porque pongáis, en ambos, el mismo contenido y ya está. En el caso de que se esté definiendo un color habrá que poner un número hexadecimal entre #000000 y #FFFFFF (aunque también vale entre #000 y #FFF). Estos número son colores en el que cada par pertenece a la concentración de Rojo, Verde y Azul consecutivamente del color final. En caso de que el tipo sea una fuente deberá de contener lo siguiente: normal {estilo} {porcentaje de tamaño} {tipo de letra} {familia de letra}, en el que estilo puede ser: bold, italic, .. porcentaje: 0% - 999% puede que incluso más. Tipo de letra de cualquiera de las innumerables y familia, lo usual, es que sea serif o sans-serif.