CSS rápido (Parte 1)

CSS (Cascading Style Sheets) es un mecanismo para adicionar un estilo (fuentes, colores, etc) a un documento HTML. El proceso es simple, por ejemplo, para establecer que el tag H1 aparezca azul:

H1 { color: blue }

Esto es lo que se llama una regla y consiste en dos partes, la primera (H1) se denomina selector, la segunda (color: blue), declaración. A su vez, esta última tiene dos partes, la propiedad (color) y el valor (blue).

El selector es un vínculo entre el HTML y la hoja de estilo. Todos los elementos de un documento son selectores y cada uno de estos posee un conjunto de propiedades.

Hay cuatro formas de establecer el estilo.

La primera es incluirla dentro del tag STYLE:

<STYLE type="text/css">
H1 { color: blue } /* esto es un comentario */
</STYLE>

la segunda es desde un archivo externo (generalmente de extensión css):

<LINK rel=STYLESHEET tupe="text/css" href="archivo.css">

la tercera es importarla:

<STYLE type="text/css">
@import url(http://style.com/basic);
</STYLE>

y por último, la cuarta, es mediante el atributo style de un tag:

<P style="color: green"> Letras verdes</P>

Para reducir el tamaño de las hojas de estilo, los selectores pueden agruparse separándolos mediante comas:

H1, H2, H3 { font-family: helvetica }

también pueden agruparse las declaraciones separándolas con punto y coma:

H1 { font-weight: bold; font-size: 12pt; font-style: normal; }

además, algunas propiedades poseen una sintaxis propia para agruparse:

H1 { font: bold 12pt/14pt helvetica }

En estos ejemplos se ha establecido que todos los elementos H1 sean de color azul. Supongamos que se pose el siguiente código:

<H1>El título <EM>MAS</EM> importante</H1>

Si no se ha asignado ningún color al tag EM, como se encuentra dentro de otro elemento, también será azul. Para establecer un estilo por defecto debe establecerse un estilo para los elementos superiores, por ejemplo, en el tag BODY:

BODY { color: black; background: url(archivo) white; }

esto funcionará aún cuando se omita el tag BODY en la página HTML.

Como detalle, se muestra una forma de establecer un fondo que, puede ser un archivo url(archivo) o, si la imagen no se encuentra, un color.

Hay casos en que esto no se cumple, por ejemplo, la propiedad background no se hereda.

A menudo, la propiedad es un porcentaje referido a otra propiedad:

P { font-size: 10pt }
P { line-height: 120% } /* relativo a font-size

Para permitir el control sobre los elementos, se ha incluido el atributo class a todos los elementos del BODY. A través de este atributo puede referenciarse el estilo. Por ejemplo:

H1.ejemplo { color: #00FF00 }
.......
<H1 class=ejemplo>Esto es verde</H1>

el nombre del elemento puede omitirse en la definición:

.ejemplo { color: green }

También se ha incluido el atributo id que puede ser accesible precediéndolo con el carácter #:

#ejemplo { letter-spacing: 0.3em }
H1#ejemplo { letter-spacing: 0.5em }
.......
<P id=ejemplo>Texto de ejemplo</P>

Si se quiere que los elementos EM posean otro estilo deberá crearse un estilo para EM. Pero si lo que se quiere es que los EM dentro de los H1 tengan un estilo, puede utilizarse:

H1 EM { color: red }

este tipo de selector se denomina contextual y consisten en una serie de elementos separados por un espacio. Esto puede tener multiples opciones y combinaciones:

UL LI { font-size: small }
UL UL LI { font-size: x-small }
DIV P { font: small sans-serif }
.ejemplo1 H1 { color: red }
#ejemplo2 CODE { background: blue }
DIV.ejemplo3 H1 { font-size: large }
H1 B, H2 B, H1 EM, H2 EM { color: red }

Hay algunas pseudo-classes que son provista por el mismo lenguaje para determinados elementos. Por ejemplo, para el tag A:

A:link { color: red } /* links no visitados */
A:visited { color: blue } /* link visitados */
A:active { color: lime } /* links activos */

Todo elemento A con el parámetro href debe ser definido mediante alguna de estas subclases. Estas pseudo-classes pueden ser utilizadas como selectores contextuales o combinadas con clases comunes:

A:link IMG { border: solid blue }
A.external:visited { color: blue }

Las hojas de estilo permiten incrementar el tamaño de las declaraciones agregando el operador !important:

H1 { color: black ! important; background: white ! important }
P  { font-size: 12pt ! important; font-style: italic }