Ahora que ya te has aproximado al concepto de las hojas de estilo en cascada y sabes como aplicar las variaciones vamos a detallar un poco más las características que podemos definir. No vamos a realizar una definición exhaustiva de todas las posibilidades, pero sí veremos las más habituales.

Tamaño de texto

Atributo: font-size

Valores: Se pueden expresar introduciendo un valor entero que indique su medida en puntos (pt), pulgadas (in), centímetros (cm), pixels (px), anchura de la letra eme (em) o altura de la letra equis (ex). También se puede utilizar un valor porcentual respecto al tamaño base que se utiliza por defecto.

Ejemplos:
Tamaño 250%
Tamaño 18 puntos
Tamaño 2 em Tamaño 1 em
Tamaño 3 ex Tamaño 1 ex
Tamaño 18 píxels
Tamaño 1 centímetro
Tamaño 0,5 pulgadas

Si necesitas utilizar decimales tendrás que utilizar la notación anglosajona, en la que el separador decimal es el punto en lugar de la coma.

Tipo de letra

Atributo: font-family

Valores: Se puede utilizar el nombre de la letra. Es conveniente añadir, separados por comas, nombres de letras similares y finalizar, por si no está instalada ninguna de ellas, con el nombre de la familia. Las familias de letras básicas son: serif, sans-serif, monospace, cursive y fantasy.

Ejemplos: Podríamos hacer una referencia del tipo font-family:Arial,Helvetica,Verdana,sans-serif

Familia serif
Familia sans-serif
Familia monospace
Familia cursive
Familia fantasy

Las familias cursive y fantasy se presentan en Netscape como serif y sans-serif respectivamente.

Estilos de letra

Atributo: font-style

Valores: Se puede utilizar normal o italic. Permite alternar entre la presentación entre ambos tipos.

Ejemplos: Letra normal Letra itálica

Grosor de la letra

Atributo: font-weight

Valores: Aunque la especificación CSS indica que se pueden utilizar las palabras extra-light, light, demi-light, medium, demi-bold, bold, extra-bold que irán mostrando la letra en una escala ascendente de grosor sólo he podido comprobar la validez del atributo bold, puesto que no parece que los navegadores actuales sean capaces de mostrar la escala de grosor mencionada.

Ejemplos: Letra bold

Combinar los atributos referentes a la fuente de letra

No es necesario que especifiquemos los atributos de forma independiente. Podemos agruparlos si se mantiene el orden tamaño, familia, estilo, grosor. De hecho, es recomendable que definamos la etiqueta body para que la base de todos los elementos de texto tenga las mismas características.

Ejemplo: body {font-size:12pt; font-family:sans-serif; font-style:italic; font-weight:bold} da como resultado que todo el texto de la página tome como base la apariencia que se muestra aquí.

Color

El atributo de color puede aplicarse al texto, pero también a otros elementos de la página, por lo que se menciona de forma independiente.

Valores: Para nombrar un color pueden utilizarse varios métodos:

• Los nombres reservados que aparecen en cada uno de los colores de la figura precedente.
• Combinación RGB (rojo, verde, azul) utilizando la notación color:rgb(150,23,220) donde indicamos los valores decimales de cada color.
• Combinación RGB (rojo, verde, azul) utilizando la notación color:rgb(75%,0%,47%) donde indicamos los valores porcentuales de cada color.
• Combinación RGB (rojo, verde, azul) utilizando la notación hexadecimal color:#a5376f donde los valores de cada color son representados por cada una de las tres parejas y precedidos por el signo #
• Combinación RGB (rojo, verde, azul) utilizando la notación hexadecimal color:#a53 donde los valores de cada color son representados por un único número o letra y precedidos por el signo # (sólo permite 4096 colores)

Márgenes

Atributo: margin

Valores: Se pueden expresar introduciendo un valor entero que indique su medida en puntos (pt), pulgadas (in), centímetros (cm), píxels (px)

• Si sólo ponemos un valor, se aplica a todos los lados.
• Si marcamos dos valores, los márgenes superior e inferior son determinados por el primer valor y los márgenes derecho e izquierdo por el segundo.
• Si damos tres valores, el superior es definido por el primer valor, el izquierdo y el derecho son definidos por el segundo, y el inferior por el tercero.
• Si hay cuatro valores se aplican siguiendo el sentido de las agujas del reloj al superior, derecho, inferior e izquierdo, respectivamente.

Los márgenes se suelen especificar dentro de la etiqueta body ya que habitualmente se utilizan para definir toda la página.

Interlineado

Atributo: line-height

Valores: Se pueden expresar introduciendo un valor entero que indique su medida en puntos (pt), pulgadas (in), centímetros (cm), pixels (px) o porcentaje (%)

Ejemplos: En esta línea se ha empleado un interlineado del 200%, de forma que presente una distancia doble a la habitual, respecto a la anterior y la posterior .

En esta línea se ha empleado un interlineado de 10 puntos. Como el tamaño de la letra es también de 10 puntos se puede comprobar que la parte superior de las letras llega hasta la base del renglón anterior.

Sangría

Atributo: text-indent

Valores: Se pueden expresar introduciendo un valor entero que indique su medida en puntos (pt), pulgadas (in), centímetros (cm), píxels (px) o porcentaje(%)

Ejemplos: Este párrafo tiene aplicado un sangrado de 45 puntos y por eso su primera línea se inicia tras dejar un espacio en blanco al principio del renglón

Alineación

Atributo: text-align

Valores: Además de los valores aceptados por el lenguaje HTML (left, center y right) nos permite introducir la justificación respecto a los dos márgenes utilizando la palabra justify

Ejemplos: Todos los textos de este curso están diseñados con el atributo justify para evitar el efecto denominado de "banderas" o "gallardetes" provocado por la falta de ajuste del final o principio de renglón respecto al margen.

Fondos

Atributo: background

Valores: podemos utilizar el nombre o la referencia RGB de un color o bien el URL de una imagen. Con ello podemos hacer que los fondos se apliquen solamente a una determinada porción del documento, en lugar de hacerlo a toda la página.

Ejemplos:

En este párrafo se ha aplicado un fondo utilizando la etiqueta background:orange

Ahora se ha utilizado una imagen y la forma de expresarlo ha sido background:URL(claro09.jpg)

Pseudoclases :link, :visited y :hover

Habitualmente, los navegadores muestran subrayado el texto de los enlaces y varían el color en función de que el enlace haya sido visitado o no. Sin embargo, cada vez es más frecuente ver páginas en las que los enlaces no aparecen subrayados y adoptan otros colores.

Aunque se podría conseguir el mismo efecto definiendo las propiedades en cada página, la forma más cómoda de hacerlo es incluyendo en una hoja de estilo las características que deberá tener el texto en cada situación. Para ello se incluirá en el archivo css de definición del estilo las propiedades para presentar:

El texto de un enlace no visitado (a:link)
El texto de un enlace visitado (a:visited)
El texto de un enlace cuando pasamos el ratón sobre él (a:hover)

Ejemplos:

La hoja de estilo de este curso incluye la definición

a:link { font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
text-decoration:none;
color:#0000CC;
font-weight:bold } con la que se consigue que el texto del enlace se presente así

Si has pulsado sobre la palabra así habrás comprobado realmente no es un enlace aunque tiene su apariencia. Esto es así para permitir que lo puedas tener como referencia de la presentación original, ya que de lo contrario, en el momento en que lo pulsaras pasaría a ser un enlace visitado y cambiaría su aspecto. Esto sí es un enlace

Habrás comprobado que al pasar el ratón sobre el enlace éste cambia de color debido a que en la hoja de estilo se incluye la definición

a:hover { font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
color:#FF6633;
font-weight:bold;
text-decoration:none }

Una vez visitado el enlace este cambia de color debido a la definición incluida en la hoja de estilo

a:visited { font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
color:#9999FF;
font-weight:bold;
text-decoration:none;
font-style: italic }