Texto

Color

La propiedad color permite establecer el color del texto. Es posible asignar el valor de color de múltiples formas, incluyendo la posibilidad de indicar el nivel de transparencia (canal alpha). A continuación, se muestran a modo de ejemplo las más relevantes:

/* Color mediante palabras clave reservadas */
h1 {
  color: red;
}
/* Color mediante notación hexadecimal (RGB) */
h2 {
  color: #123456;
}
/* Color mediante función rgb y valores decimales */
p {
  color: rgb(24,115,34);
}
/* Color con canal alpha mediante función rgba y valores decimales.
   El valor alpha va de 0 (transparente) a 1 (opaco).
*/
p span {
  color: rgba(0,0,0,0.25);
}

Tipografía

La propiedad font-family permite establecer tipografía de la fuente del texto. Es posible indicar varias fuentes, de manera que si la primera indicada no estubiese disponible en el sistema, se utilizase la siguiente de la lista. La sintaxis que se sigue es la siguiente:

font-family: [font1], [font2], [font3], ... ;

A continuación, mostramos algunos ejemplos de uso:

/* Indicamos que la fuente a utilizar debe ser de la familia "serif" */
h1 {
  font-family: serif;
}
/* Indicamos que debe utilizarse una fuente "Arial", si no fuese posible "Times New Roman" y sino alguna de la familia "sans-serif" */
a {
  font-family: Arial, "Times New Roman", sans-serif;
}
/* Indicamos que la fuente a utilizar debe ser de la familia "monospace" como la "Courier New" */
p {
  font-family: monospace;
}

Tamaño

La propiedad font-size permite establecer el tamaño del texto. Es posible indicar el tamaño en unidades relativas o absolutas:

• Para indicar el tamaño en unidades absolutas se utilizan las siguientes palabras clave ordenadas de menor a mayor tamaño: xx-small, x-small, small, medium, large, x-large, xx-large. También puede emplearse como es lógico una unidad de tamaño absoluto como px, cm, ...

• Para indicar el tamaño del texto en unidades relativas se pueden utilizar las siguientes palabras clave: smaller y larger, cuyo efecto es reducir o ampliar el tamaño de la fuente en cuestión respecto la su elemento padre (contenedor). Trabajando en unidades de tamaño relativas también es posible emplear un % para indicar el porcentaje exacto de tamaño respecto el elemento padre, o usar unidades como em.

A continuación, mostramos algunos ejemplos de uso:

/* Indicamos un tamaño de fuente extra-exta grande */
h1 {
  font-size: xx-large;
}
/* Indicamos que el tamaño de la fuente del anchor debe ser menor que el del elemento contenedor */
a {
  font-size: smaller;
}
/* Indicamos que el tamaño de la fuente es un 125% respecto el tamaño de la fuente del elemento contenedor */
p {
  font-size: 125%;
}
/* Indicamos que el tamaño de la fuente es de 15 píxeles */
p span {
  font-size: 15px;
}

Grosor

La propiedad font-weight permite establecer el grosor de la fuente del texto. Es posible indicar el grosor mediante las siguientes palabras clave ordenadas de menor a mayor grosor: lighter, normal, bold, bolder. También se puede graduar el grosor mediante una escala de valores numéricos del 100 al 900, siendo 100 el valor del trazo más fino y 900 el valor para el trazo más grueso.

A continuación, mostramos algunos ejemplos de uso:

/* Indicamos un grosor normal (por defecto) */
h1 {
  font-weight: normal;
}
/* Indicamos un grosor de negrita */
a {
  font-weight: bold;
}
/* Indicamos el mínimo grosor posible. */
p {
  font-weight: 100;
}

Estilo

La propiedad font-style permite establecer el estilo de la fuente del texto. Es posible indicar hasta tres estilos diferentes con las palabras clave: normal, italic y oblique.

A continuación, mostramos algunos ejemplos de uso:

/* Indicamos un estilo normal (por defecto) */
h1 {
  font-style: normal;
}
/* Indicamos un estilo de cursiva */
a {
  font-style: italic;
}
/* Indicamos un estilo similar a cursiva pero más pronunciado. */
p {
  font-style: oblique;
}

Método abreviado: font

La propiedad font es un método abreviado que permite establecer la tipografía, tamaño, estilo y grosor de la fuente del elemento seleccionado mediante una única asignación. La tipografía se corresponde con la propiedad font-family, el tamaño con la propiedad font-size, el estilo con la propiedad font-style y el grosor con la propiedad font-weight. Su sintaxis es la siguiente:

font: estilo grosor tamaño tipografía;

A continuación, se presentan algunos ejemplos de uso:

/* Fuente Courier New, negrita y extra extra grande */
h1 {
  font: bold xx-large "Courier New", monospace;
}
/* Fuente Times New Roman en cursiva y tamaño pequeño */
p {
  font: italic normal small "Times New Roman", sans-serif;
}

Decoración

La propiedad text-decoration permite establecer la decoración del texto del elemento mediante una línea de: subrayado, tachado, etc. Es en realidad un método abreviado de las propiedades text-decoration-line, text-decoration-color y text-decoration-style. A diferencia de otros métodos abreviados, el uso de esta propiedad obliga a indicar como mínimo el valor para text-decoration-line, pues el resto no tendrían sentido por sí solos. Su sintaxis es:

text-decoration: text-decoration-line text-decoration-color text-decoration-style

Los posibles valores para text-decoration-line son:

• none : Sin línea de decoración. Valor por defecto.

• underline : Subrayado.

• overline : Subrayado superior.

• line-through : Tachado.

Los posibles valores para text-decoration-color, como resulta lógico, pasan por el uso de cualquier color CSS. Los posibles valores para text-decoration-style son:

• double : Se muestra una línea doble de decoración.

• dotted : Se muestra una línea de decoración elaborada mediante puntos.

• dashed : Se muestra una línea de decoración elaborada mediante guíones.

• wavy : Se muestra una línea de decoración elaborada mediante una ondulación.

• solid : Se muestra una única línea de decoración. Valor por defecto.

Cabe señalar que es posible indicar más de una línea de decoración para un mismo elemento. Veamos ahora algunos ejemplos de uso:

h1 {
  text-decoration: underline red wavy;
}

h2 {
  text-decoration: line-through dotted;
}

h3 {
  text-decoration: underline blue double;
}

h4 {
  text-decoration: underline overline;
}

Esta propiedad habitualmente se usa para eliminar la decoración que por defecto los navegadores añaden a los hiperenlaces. Para hacerlo, basta con indicar text-decoration: none;

Transformación

La propiedad text-transform permite establecer algunas transformaciones de mayúsculas-minúsculas al texto del elemento seleccionado. Las palabras reservadas que se admiten como posibles valores para la propiedad son:

• uppercase : Transforma todos los caracteres del texto a mayúsculas.

• lowercase : Transforma todos los caracteres del texto a minúsculas.

• capitalize : Transforma el primer caracter de cada palabra a mayúsculas.

• none : Sin transformación alguna.

Veamos algunos ejemplos de uso:

div.a {
  text-transform: uppercase;
}

div.b {
  text-transform: lowercase;
}

div.c {
  text-transform: capitalize;
}