Con lo que hasta aquí llevamos visto de HTML, ya te habrás dado cuenta de que, cuando vas a crear un documento, se te presentan dos cuestiones básicas: la lógica, es decir, la estructura del contenido de tu documento, como las cabeceras, párrafos, etc. y la física, que es la presentación o estética del documento, las dos cosas, a menudo, pueden ser complicadas de resolver. Si tomas esta guia como ejemplo, verás que no se le ha dedicado mucho trabajo a la vista final. En efecto, me interesa más que entiendas lo que digo, que deslumbrarte con las apariencias y no decir nada. Eso no significa que un documento no deba estar bien presentado, lo ideal es que tenga las dos cosas, pero es una cuestión de prioridades, de tiempo... o de necesidad, si se trata de un producto comercial que hay que vender.
No es que el HTML no tuviese hasta aquí recursos de estilo, que ya hemos visto en páginas anteriores, como los tipos, tamaños y colores de letra (<FONT>), atributos de estilo de formularios y links, (<STYLE>) y otros, pero todos ellos estan escritos embebidos en el propio código html. Estas definiciones típicas hacen muy trabajoso el cambiar de estilo, ya que eso implica que hay que editar todas las páginas del documento en muchos puntos de las mismas. Para intentar resolver este problema, se han implementado las hojas de estilo o CSS (Cascade Style Sheets).
El problema que tienen, por ahora, es que no todos los navegadores soportan el mismo tipo de lenguaje CSS, ni lo interpretan de la misma forma (a pesar de que existe un estándar como en el HTML), ni por supuesto la misma versión de lenguaje, que actualmente va por la 2. El estándar dice que un navegador que soporte la versión 2 de CSS también soportará la 1, eso dice, pero tal vez el navegador no lo sepa, o no soporte la 2, o ninguna y se cuelge irremisiblemente... Una de las peores cosas que tienen las hojas de estilo, es que si el navegador no entiende lo que hay en ellas, en lugar de ignorarla, puede colgarse, o en el mejor de los casos, ofrecer una imagen desoladora de nuestra página. Así pues, es buena idea probar las hojas de estilo con cuantas versiones de navegador se pueda, y saber con cuales no funciona. Y si es posible, procurar que el documento, sin aplicarle ningun estilo, solamente utilizando los valores por defecto, tenga una apariencia más o menos aceptable. Recuerda que no todo el mundo tiene la última versión de todo.
La tecnología aplicada a las CSS es utilizable de cuatro formas distintas:
1.- En línea, que es la forma ya conocida, aunque aquí se utiliza una sintaxis algo diferente. Sea por ejemplo:
<P STYLE="font-size:20px; font-family:Courier; color:green">Ejemplo de estilo</P>
Este es el resultado:
Ejemplo de estilo
2.- Por clase de estilo. Esta técnica consiste en definir una clase, que es un conjunto de propiedades de estilo agrupadas bajo un nombre. La clase creada se invoca desde un elemento <SPAN>. Por ejemplo, para definir la clase prueba_cl:
<HTML>
<HEAD><TITLE>Estilos</TITLE>
<STYLE TYPE="text/css">
.prueba_cl{ font-size:20px; font-family:Courier; color:green;}
</STYLE>
</HEAD>
<BODY>
<SPAN CLASS="prueba_cl">Ejemplo de estilo</SPAN>
</BODY>
</HTML>
3.- Por identificador de bloque, que al igual que la clase, consiste en definir un conjunto de propiedades de estilo agrupadas bajo un nombre, que se asignarán a un bloque. El identificador creado se invoca desde un elemento <DIV>. Por ejemplo, para definir el identificador prueba_id:
<HTML>
<HEAD><TITLE>Estilos</TITLE>
<STYLE TYPE="text/css">
#prueba_id{ font-size:20px; font-family:Courier; color:green;}
</STYLE>
</HEAD>
<BODY>
<DIV ID="prueba_id">Ejemplo de estilo</DIV>
</BODY>
</HTML>
Y en ambos casos, este es el resultado:
Ejemplo de estilo
Como puedes ver, los dos ejemplos anteriores son casi iguales. A simple vista solamente cambia el caracter que hay delante del nombre prueba_, que es un punto para la clase y una almohadilla para el identificador, pero internamente, la diferencia estriba en que la clase puede ser utilizada por todos los bloques de texto que se quiera, mientras que el identificador solamente se puede utilizar una vez. Estas dos últimas técnicas, permiten cambiar algo más fácilmente el estilo de la página, ya que solamente habría que tocar la cabecera de cada una, pero si el documento tiene varios cientos de ellas, sigue siendo un trabajo importante. La solución para poder cambiar el estilo de todo el documento, editando solamente desde un sitio, es la cuarta forma:4.- Por fichero de estilos externo Esto consiste en escribir las definiciones de estilo en un fichero aparte de las páginas, y referenciarlo en la cabecera de cada una. El fichero es un simple fichero de texto guardado con la extensión .css
<HTML> <HEAD><TITLE>Estilos</TITLE> <LINK REL="stylesheet" TYPE="text/css" HREF="estilo.css"> </HEAD> <BODY> Ejemplo de estilo </BODY> </HTML>Este es el contenido del fichero estilo.css
/* Estilo para el cuerpo del documento */
BODY {font-size:20px; font-family:Courier; color:green;}
Y este sería el resultado:
Ejemplo de estilo
Como puedes ver, es lo mismo que se escribió en los ejemplos anteriores, pero ahora, en lugar de un nombre inventado por el usuario, se indica el nombre de un elemento HTML al que se quiere dar estilo propio, en este caso toda la página: BODY. Por supuesto, en el fichero se pueden incluir todos los elementos HTML que se quiera. También se pueden incluir en el fichero nombres que no coinciden con elementos HTML, tal como se ha hecho en los ejemplos 2 y 3, con la clase prueba_cl o el identificador prueba_id, invocándolos con el elemento correspondiente.
estilo.css
/* Estilo para el cuerpo del documento */
BODY {font-size:20px; font-family:Courier; color:green;}
Como ya habrás adivinado, la primera línea es un comentario. Los caracteres /* y */ son los mismos que se utilizan en JavaScript.
A continuación tenemos una línea que comienza con el nombre de un elemento html: BODY lo que significa que todas las instrucciones que vienen a continuación, encerradas dentro de un par de llaves { } (ojo, no son corchetes), igual que en javaScript, definirán los parámetros de estilo que hay que aplicarle a BODY. Al conjunto de declaraciones escritas dentro de las llaves, se le llama bloque de declaraciones. Aunque en los ejemplos se han escrito las declaraciones en línea, no hay nada que impida hacerlo de otra forma:
/* Estilo para el cuerpo del documento */
BODY {
font-size:20px;
font-family:Courier;
color:green;
}
Si alguna de las declaraciones del bloque tiene un error de sintaxis, de lógica, o no es compatible con los recursos del navegador, simplemente se ignora y se ejecutan las demás. Los bloques de declaraciones pueden anidarse y formar bloques complejos.
No hay que seguir ningun orden especial para escribir las delaraciones ni sus nombres, pero ten presente que las declaraciones hechas para un elemento serán heredadas por algunos de los otros, salvo que se indique lo contrario, redefiniendo valores para esos otros elementos. Por ejemplo, lo definido para el elemento <BODY> será heredado por todos los elementos de la página ya que <BODY> es el "padre" de todos los demás elementos. De la misma forma, lo declarado para un elemento <P> sería heredado por los posibles elementos que contenga, como <B> o <I>, y así sucesivamente.
Esto de los parentescos tiene bastante importancia. Además, según como se escriban las etiquetas se pueden conseguir cosas diferentes. Por ejemplo, con esta página:
<HTML> <HEAD><TITLE>Estilos</TITLE> <LINK REL="stylesheet" TYPE="text/css" HREF="estilo.css"> </HEAD> <BODY> <B>Negrita verde</B> Ejemplo de estilo verde <P>Parrafo 1 <B>Negrita rojo</B></P> <P>Parrafo 2</P> </BODY> </HTML>Si escribimos esta hoja de estilo:
BODY {color:green}
P B {color:red}
Se obtiene:
Negrita verde Ejemplo de estilo verde
Parrafo 1 Negrita rojo
Parrafo 2
Pero simplemente poniendo una coma entre P y B:
BODY {color:green}
P, B {color:red}
Se obtiene:
Negrita verde Ejemplo de estilo verde
Parrafo 1 Negrita rojo
Parrafo 2
En el primer caso, queda claro que los dos elementos <P> del fichero html heredan el color verde de <BODY>, y al no haber ninguna coma entre P y B en la hoja de estilo, se está indicando que el color rojo es sólo para el texto en negrita cuando forme parte de P, pero en el segundo caso, con una coma separando P de B, se le indica que el color rojo es para el texto de ambos elementos, P y B, siempre, esté en el párrafo que esté, e incluso aunque no esté en un párrafo, como es el caso del texto "Negrita verde"
Unidades relativas
Son las que dependen de la resolución de la pantalla del cliente o del tipo de letra base que se utilice en la página. Hay dos de este tipo: em que toma como referencia la anchura o altura de la letra M mayúscula de la fuente más relevante de la línea. Por ejemplo, si se escribe line-height:2em significa que la altura de la línea será 2 veces la altura máxima de las fuentes de esa línea.
La otra unidad, ex que hace referencia a la altura de la letra x minúscula, que es aproximadamente la mitad de la anterior M. Por ejemplo, al escribir line-height:2ex se indica que la altura de la línea será 2 veces la mitad de la altura máxima de la fuente usada.
Unidades absolutas
Que son las que no dependen de los factores de las unidades relativas antes descritas. Entre estas tenemos cm (centímetro), mm (milímetro), in (pulgadas), pt (puntos tipográficos, igual que los puntos de las fuentes de Windows), px (píxels de pantalla) y pc (picas).
Hasta que tengas cierta soltura en estos menesteres, puede no ser fácil acertar con la unidad adecuada en cada caso. Como orientación inicial, tal vez pueda ayudarte el saber que (aproximadamente) 1 px equivale a 0.28 mm o 0.011 in. 1 in son 2.54 cm. 1 pc son 12 pt. 1 pt equivale a 0.0139 in. 12 pt equivalen a 0.2 in.