# Texto

En esta lección aprenderás las propiedades que se pueden aplicar al texto de una página web:

- Color del texto y color de fondo
- Alineación
- Sangría
- Decoración
- Mayúsculas / minúsculas
- Espaciado de letras y palabras

## Color del texto y color de fondo

La propiedad color permite establecer el color del texto. La propiedad background-color permite establecer el color de fondo del texto.

body { background-color: aqua; } h2 { color: magenta ; background-color: gold; } p { color: blue; background-color: lightblue; } | ## Esto es un encabezado h2 Esto es un párrafo p normal y corriente. Esto es otro párrafo p.

El color de fondo de la página se establece en la etiqueta body,

El color de fondo de una etiqueta no se aplica solamente al texto, sino a la caja que contiene el texto (por eso el color de fondo se extiende hasta la derecha de la línea).

Volver al índice

## Alineación

La propiedad text-align permite establecer la alineación de un bloque de texto. Los posibles valores de text-align son left (izquierda), right (derecha), center (centro) y justify (justificado a derecha e izquierda).

body { text-align: justify; } h2 { text-align: center; } h3 { text-align: right } | ## Esto es un encabezado h2 ### Esto es un encabezado h3 Esto es un párrafo p normal y corriente que se muestra justificado a derecha e izquierda porque se ha establecido la propiedad en body y, por tanto, afecta a todos los elementos menos a los que tienen la propiedad explícitamente establecida con otro valor

Volver al índice

## Sangría

La propiedad text-indent permite establecer la sangría de un bloque de texto. Su valor se puede establecer como cualquier otra longitud.

p { text-indent: 25px; } | Esto es un párrafo p normal y corriente cuya primera línea tiene sangría, es decir, empieza más a la derecha que el resto de líneas del párrafo. La sangría es habitual en España (y no sólo para beberla).
p { text-indent: -25px; } | Esto es un párrafo p normal y corriente cuya primera línea tiene sangría negativa (sangría francesa), es decir, empieza más a la izquierda que el resto de líneas del párrafo, así que se ve bastante mal. Poniendo margen al párrafo se corrige este problema (lo veremos más adelante).

Volver al índice

## Decoración

La propiedad text-decoration permite añadir a un bloque de texto distintos tipos de rayado. Los posibles valores de text-decoration son none (ninguno), underline (subrayado), overline (sobrerayado), line-through (tachado) y blink (parpadeo). Internet Explorer no reconoce el valor blink.

h2 { text-decoration: underline; } h3 { text-decoration: overline; } h4 { text-decoration: blink; } p { text-decoration: line-through; } | ## Esto es un encabezado h2 ### Esto es un encabezado h3 #### Esto es un encabezado h4 Esto es un párrafo p normal y corriente.

Volver al índice

## Mayúsculas / minúsculas

La propiedad text-transform permite cambiar el texto a minúsculas o mayúsculas. Los posibles valores de text-transform son none (ninguno), capitalize (la primera letra de cada palabra en mayúsculas), uppercase (todas las letras en mayúsculas) y lowercase (todas las letras en minúsculas).

h2 { text-transform: capitalize; } h3 { text-transform: uppercase; } h4 { text-transform: lowercase; } | ## Esto es un encabezado h2 ### Esto es un encabezado h3 #### Esto es un encabezado h4

Volver al índice

## Espaciado de letras y palabras

La propiedad letter-spacing permite establecer un espaciado entre cada una de las letras de un bloque de texto. La propiedad word-spacing permite establecer un espaciado entre cada una de las palabras de un bloque de texto. Estos valores, positivos o negativos, se establecen como cualquier otra longitud y se añaden al espaciado normal.

h2 { letter-spacing: 5px; } h3 { word-spacing: 10px;} h4 { letter-spacing: -2px; } | ## Esto es un encabezado h2 ### Esto es un encabezado h3 #### Esto es un encabezado h4

Ver bug 125.390 (letter-spacing se aplica a última letra) en la página de bugs de Mozilla.

Volver al índice