Una vez escrito, estructurado e hipertextualizado el texto, llega el momento de darle estilo al documento. En la parte anterior escribimos una línea en el encabezado (header) que decía así: <link rel="stylesheet" href="estilo.css" type="text/css" media="screen" />. Con esta línea le decimos al navegador que, en la misma carpeta que el documento xhtml, hay otro documento llamado estilo.css que contiene instrucciones sobre el aspecto del documento.

La tecnología css nos permite controlar muchos aspectos de la presentación, tales como colores, tipografías, posicionamientos... y no sólo de cara a la presentación en pantalla, sino también en la impresión o incluso en la presentación para navegadores de voz (hojas de estilo aurales).

1. Sintaxis
   1. Selectores
      1. Selectores de clase
      2. Selectores de identidad
      3. Agrupar selectores
      4. Selectores contextuales
   2. Declaraciones
   3. Herencias, padres e hijos
   4. Comentarios
2. Etiquetas de bloque
3. Texto
4. Listas
5. Dinamismo en los hiperenlaces
6. Posicionamiento CSS
7. Validando la hoja de estilo

Las hojas de estilo son documentos en formato de texto plano grabados con la extensión .css. No requieren encabezamientos ni declaraciones especiales en su apertura. Un ejemplo de hoja de estilo:

body { margin: 0px;
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 12px; }
h1 { font-family: Georgia, "Times New Roman", serif;
     font-style: italic; }
a:link { color: #ff9900; text-decoration: none; }
a:hover { color: #ffffff; background-color: #ff9900; text-decoration: none; }

Una hoja de estilo define cómo se verán en pantalla (o en el papel, o en los dispositivos de voz...) los diferentes elementos que hemos colocado en el documento xhtml.

Selectores

Cualquier elemento xhtml puede usarse como selector.

Una definición sencilla se compone así:

selector { propiedad: valor; }

Primero se escribe el nombre la etiqueta (por ejemplo body), seguida de las definiciones de estilo agrupadas entre corchetes ({}) y separadas por puntos y comas (;). Intenta colocar el código de forma que luego sea cómodo revisarlo.

Selectores de clase

Si queremos que un selector no se comporte igual siempre, podemos usar las clases: se usan colocando un punto y el nombre de la clase inmediatamente después del selector. Ejemplo:

selector.clase { propiedad: valor; }

Claro que para que esto tenga efecto sobre la etiqueta XHTML tendremos que aplicar el atributo class dentro del documento XHTML. Por ejemplo:

<p class="nombre_de_la_clase"> texto </p>

En este caso, la clase sólo se puede aplicar al selector al que se haya asociado. También puede usarse la clase sin poner selector, y en ese caso puede aplicarse a cualquier etiqueta XHTML. En este caso escribiríamos:

.clase { propiedad: valor; }

Selectores de identidad

Los selectores de identidad sirven para aplicar estilo a elementos individuales, concretos. Si los selectores de clase se definían con un punto, los selectores de identidad se definen con una almohadilla o sostenido:

#nombre { propiedad: valor; }

Al igual que las clases, tienen que tener referencia en el documento XHTML para que se aplique:

<p id="nombre"> texto </p>

Estos selectores individuales vienen muy bien porque, agrupando elementos dentro de etiquetas div y posicionándolos mediante css, tenemos un equivalente web de las capas a las que estamos tan acostumbrados en programas como Adobe Photoshop.

Agrupar selectores

Si queremos aplicar una serie de propiedades a diferentes selectores, los agrupamos colocándolos en una lista separados por comas. Por ejemplo, así:

h1, h2, h3, h4, h5, h6 { propiedad: valor; }

Selectores contextuales

Podemos combinar diferentes selectores para conseguir efectos localizados. Por ejemplo, si queremos que el texto etiquetado con énfasis (em) dentro de los párrafos (p) tenga una característica especial, lo indicaremos así:

p em { propiedad: valor; }

Así, el texto con énfasis (em) fuera de los párrafos no seguirá esta norma.

Declaraciones

Hasta ahora hemos visto qué podemos hacer con los selectores, que son la primera parte de cada definición. La segunda parte es la declaración, que es donde se especifica cómo queremos que se vea la etiqueta nombrada mediante el selector. La declaración consta de propiedades y valores:

selector { propiedad: valor; }

Herencias, padres e hijos

Hay un concepto muy importante a la hora de escribir hojas de estilo: la herencia. Por la misma estructura de xhtml hay elementos que están subordinados a otros: hay elementos "padre" y elementos "hijo". Por ejemplo, la etiqueta body contiene a todas las demás. Entonces, cuando aplicamos una propiedad a body, la heredan todas las etiquetas que están contenidas en él. Así, si en body especificamos que el color del texto sea verde, éste será verde en todos los párrafos, cabeceras... etc, del documento.

No obstante, estas herencias se aplican sólo por defecto; es decir, cuando no especifiquemos nada concreto para el resto de los elementos. Si definimos que los párrafos tengan texto azul, esta orden sobreescribe la otra.

Hay casos en los que las propiedades no se heredan, aunque son bastante lógicos: por ejemplo, cuando especificamos un margen para el cuerpo del documento, los párrafos no lo heredan.

Comentarios

Al igual que en xhtml, podemos escribir comentarios en las hojas de estilo CSS. Sólo hay que colocar una barra y un asterisco al principio del comentario y viceversa al final:

/* comentario */

Ahora ya podemos estudiar los elementos que modifican la presentación de los elementos de bloque (cuerpo, cabecera, listas, citas de bloques y párrafos) con los distintos valores que pueden tomar.

background-color: #000000;

Determina el color de fondo del bloque. No olvidemos el símbolo de sostenido o almohadilla antes del código hexadecimal. También pueden usarse los nombres de los colores en inglés, prescindiendo entonces del sostenido o almohadilla. Es preferible, no obstante, usar los códigos hexadecimales.

background-image: url(imagen.jpg);

Especifica si queremos una imagen de fondo en la página.

background-repeat: repeat;

Especifica si queremos que la imagen se repita (repeat), que no se repita (no-repeat), que se repita sólo horizontalmente (repeat-x) o que sólo lo haga verticalmente (repeat-y).

background-position: top left;

Indica dónde queremos que se posicione la imagen de fondo. El primer valor será la posición en horizontal, y el segundo la posición en vertical. Pueden usarse valores numéricos o palabras en inglés (left, center, right, top, bottom y middle).

margin: 0px;

Determina la distancia entre el espacio delimitado por la etiqueta que estamos definiendo y la ventana.

border: medium dotted white;

Fija cómo será en grosor (primer valor), trazo (segundo) y color el borde del bloque. Sólo lo usaremos si queremos que el borde sea igual en sus cuatro lados. Los posibles valores de grosor son: thin (delgado), medium (medio) y thick (grueso); los más frecuentes de trazo, dotted (a puntos), dashed (a rayitas), solid (línea continua) y none (sin borde).

padding: 5px;

Marca los píxeles de relleno de la caja en las cuatro direcciones.

Respecto a la presentación del texto, lo normal es que lo definamos dentro de la etiqueta body de forma general, aplicándose así por defecto al resto de elementos. Después, si queremos, ya cambiaremos los atributos de algún elemento en particular. No hay por qué definir todo en todas las etiquetas, sólo lo que es distinto del resto de la página. Las principales propiedades que afectan al texto son:

background-color: #000000;

Igual que los elementos de bloque.

font-family: Arial, Helvetica, sans-serif;

Indica una lista de tipos de letra a usar. Si no se encuentra uno, se usará el siguiente en la lista, y así sucesivamente. Al final se suele colocar un nombre genérico para que el sistema use un tipo de letra de ese estilo si no encuentra ninguno de los indicados.
Los nombres genéricos de tipos de letra son: serif (con serifa), sans-serif (sin serifa), cursive (cursiva o caligráfica), fantasy (decorativa) y monospace (de anchura fija, como el texto que muestran los terminales informáticos).

font-size: 12px;

Define el tamaño de letra. Puede usarse una altura en píxels o en las otras medidas que permite css, o bien usar un tipo de medidas que se adaptan a la pantalla y navegador del lector: small, medium y large. Para valores más pequeños o más grandes pueden añadirse x- al valor: así, para letras extragrandes usaremos xxx-large (el máximo de x son tres).

font-style: italic;

Nos permite ajustar el estilo de la letra: normal o italic (cursiva).

font-variant: small-caps;

small-caps hace que el texto aparezca en versalita. normal lo deja como está.

font-weight: bold;

Permite marcar el texto como bold (negrita), bolder (negrita más marcada), lighter (fina) o normal.

text-align: justify;

Determina la alineación del texto: left (izquierda), center (centro), right (derecha), justify (justificado).

text-decoration: none;

Permite subrayar (underline), tachar (line-through), marcar (overline) o no hacer nada (none).

text-indent: 5%;

Sirve para sangrar la primera línea del párrafo.

text-transform: capitalize;

Permite presentar el texto en mayúsculas (uppercase), minúsculas (lowcase), versales (capitalize) o dejar tal cual el texto (none).

En las listas, además de todos los elementos anteriores, hay algunas propiedades específicas:

list-style-image: url(http://sitio.com/graficos/lista.png);

Si cuando definamos la etiqueta ul colocamos este código, sustituiremos los típicos círculos por el gráfico que está guardado en la dirección indicada. Si quisiéramos definir los círculos de segundo nivel (dentro de la lista) lo que haríamos sería incluir, como si de una etiqueta más se tratara: ul ul {list-style-image: url(direccion)

list-style-position: outside;

Define si los guiones o los ordinales se sitúan dentro del bloque de texto (inside) o fuera del mismo (outside).

list-style-type: circle;

Si preferimos seguir con los tradicionales círculos, números... podemos definir con esta propiedad el aspecto. Los posibles valores en las listas no ordenadas son disc (disco), circle (círculo) y square (cuadrado). En las listas ordenadas podemos elegir decimal (números arábigos), lower-roman (números romanos en minúculas), upper-roman (números romanos en mayúsculas), lower-alpha (números griegos en minúculas) y upper-alpha (números griegos en mayúsculas).

En el mundo físico, cuando empujamos una puerta o apretamos un botón, éstos reaccionan. En entornos gráficos se busca imitar esto para que sean más fáciles de usar. El caso típico de elemento interactivo en la web es el hiperenlace, y por eso se buscan formas de que resalte sobre el resto del texto. Una forma es que cuando se pasa el cursor del ratón por encima, éste cambie de forma de una flecha a una mano.

Con las hojas de estilo podemos definir qué pasará cuando el cursor del ratón pase sobre el hiperenlace, cómo aparecerá cuando ya haya sido visitado, etc... Para hacer todo esto, usaremos las siguientes propiedades:

a:link {}

Define el estado del enlace cuando no haya sido visitado aún y el cursor no esté encima.

a:hover {}

Define el estado del enlace cuando el cursor esté por encima.

a:active {}

Define el estado del enlace cuando se está pulsando sobre él.

a:visited {}

Define el estado del enlace que ya ha sido visitado.

Estos elementos (:link, :hover, :active y :visited) se llaman pseudo-clases y pueden usarse con cualquier elemento, no sólo enlaces. No obstante, es algo que no soportan todos los navegadores todavía (que yo sepa, sólo los basados en Mozilla). Es algo a tener en cuenta de cara al futuro.

Una vez sabemos todo esto sobre css podemos empezar a utilizar los atributos de posicionamiento. Gracias a ellos, podemos colocar el texto y las imágenes donde queramos, de una forma bastante flexible.

top, bottom, left y right

Especifica la distancia entre el objeto con respecto al elemento que lo contiene: arriba, abajo, izquierda y derecha. Se suele poner un valor vertical y otro horizontal, para que el posicionamiento sea visible. El valor puede especificarse en cualquier medida fija (px, pt, em...) o en un valor porcentual (%).

overflow

Indica qué sucede si el contenido de un elemento (por ejemplo, una caja de texto) excede el área que tiene asignado. Valores: visible, saca el texto sobrante de la caja; hidden, oculta todo lo que sobresalga de la caja; scroll, coloca una barra de movimiento a la derecha de la caja; y auto, lo deja a elección del navegador.

z-index

Posicionando los objetos, éstos se superpondrán alguna vez. Esta propiedad permite asignar un orden de prioridades, mostrándose en primer lugar las que tengan un número más alto y al fondo las que tengan el más bajo (que puede ser 0).

Al igual que en xhtml, antes de dar por terminada una hoja de estilo hay que pasarla por un validador para comprobar que la hemos escrito correctamente. E igual que en el caso del xhtml, tenemos las opciones del W3C y del WDG.

Ten en cuenta que, aunque escribas una hoja de estilo perfecta, hay navegadores que todavía no soportan algunos atributos, o no lo hacen correctamente. Por eso, intenta emplear sólo los atributos más básicos. Y si tienes que emplear alguno más avanzado, que no suponga una gran pérdida de posibilidades para los usuarios de navegadores que no lo soportan.

• Anterior: XHTML, Sintaxis y Etiquetas
• Siguiente: Colores e Imagenes para la Web