Dar formato al texto con CSS

Además de poder modificar propiedades de la fuente, como se vió en este tutorial, se puede cambiar las propiedades que afectan al aspecto del texto, independientemente de la fuente que tenga. Este post tratará de todas las propiedades que podemos modificar en un texto.

Color

Espefecifica el color del texto. Su valor puede ser un código hexadecimal o el nombre de un color.

Text-align

Permite alinear el texto que está dentro de un elemento contenedor. Pueden usarse los siguientes valores

  • Left: Alinea el texto al borde izquierdo del contenedo.
  • Right: Alinea el texto al borde derecho del contenedor.
  • Center: Alinea el texto en el medio del contenedor.
  • Justify: Expande el texto a lo ancho del contenedor haciendo que el borde de las líneas quede lo mas alineado posible en ambos márgenes.

A continuación muestro un ejemplo empezando por el CSS:

Este sería el respectivo código HTML:

ejemplo-text-align

Vertical-align

Permite el control de la posición vertical dentro del elemento contenedor. Es una propiedad bastante útil cuando queremos que un elemento este completamente centrado. No sólo vale para porciones de texto también se puede usar para imágenes.

Esta propiedad puede modificarse con los siguientes valores:

  • Baseline: Se alinea al punto de referencia del elemento padre (por defecto).
  • Sub: El elemento baja por debajo del punto de referencia. Tanto la parte de arriba de la imagen como la del texto, su sitúan debajo del punto de referencia.
  • Super: El elemento se sitúa por encima del punto de referencia. Inversa al caso anterior, la parte de abajo se sitúa por encima del punto de referencia.
  • Top: Tanto la parte alta del texto como de la imagen se alinea con la zona más alta del elemento.
  • Bottom: Inversa del caso anterior, tanto la parte baja del texto como de la imagen se alinea con la zona más baja del elemento.
  • Text-top: Tanto la parte alta del texto como de la imagen se alinea con la zona más alta del texto.
  • Text-bottom: Tanto la parte baja del texto como de la imagen se alinea con la zona más baja del texto.
  • Middle: El punto central del elemento se alinea con el punto central del elemento padre.

También acepta inherit (hereda del elemento padre), una longitud y un valor en porcentaje.

Mostraré un ejemplo, empezamos por el CSS:

Y este el HTML:

El uso de <span> se debe a que vertical-align se aplica a elementos inline. También un elemento block como <p> o <div> puede ser inline con:

Para mostrar correctamente el uso de bottom, top y middle inserte una imagen de freepik de la página flaticon.com. Este sería el resultado final:

ejemplo-vertical-alignText-decoration

Permite añadir una línea decorativa al texto. Los valores que usa:

  • Underline: añade una línea bajo el contenido.
  • Overline: La línea se añade por encima.
  • Line-through: La línea pasa por el medio del contenido dando un efecto de tachado.
  • None: Elimina cualquier text-decoration en un elemento.

A continuación muestro un ejemplo comenzando por el CSS:

Código HTML:

Text-indent

Esta propiedad permite añadir una sangría a la primera línea del texto dentro de un elemento. El tamaño de la sangría se modifica mediante un valor de longitud, en caso usaré pixeles:

ejemplo-text-indent

Text-shadow

Con esta propiedad se añade una sombra tras el texto. Mostraré un ejemplo explicando los parámetros usados

ejemplo-text-shadow

Text-transform

La propiedad text-transform permite especificar qué tipo de letra tendrá el texto: mayúscula, minúscula o la primera letra mayúscula de cada palabra. Los valores que se pueden usar son:

  • None: Ningún cambio.
  • Capitalize: La primera letra de cada palabra está en mayúscula.
  • Uppercase: Todo el texto está en mayúsculas.
  • Lower: Todo el contenido está en minúsculas.

ejemplo-text-transform

Letter spacing

Controla el espaciado entre letras. Esto se conoce como tracking. Aflojar el tracking significa aumentar el espacio entre letras y en caso de reducir el espacio entre ellas se denomina ajustar el tracking.

 

ejemplo-letter-spacing

Word-spacing

En este caso se ajusta el espaciado entre palabras. Funciona como letter-spacing.

 

ejemplo-word-spacing

White-space

Esta propiedad controla los saltos de línea de un texto. Pueden usarse 3 valores:

  • Normal
  • Pre: Mantiene el espacio en blanco o salto de línea.
  • Nowrap: El texto “rompe” o salta de línea solo cuando haya explícitamente un <br>.

ejemplo-white-space

Direction

Es como el atributo dir, establece como la dirección de lectura del texto. Valores posibles:

  • Ltr: El texto se lee de izquierda a derecha.
  • Rtl: El texto se lee de derecha a ziquierda.
  • Inherit: El texto se lee en la misma dirección que tenga establecida el elemento padre.

ejemplo-direction

Puede dar la sensación de que sólo se cambió la posición del texto, pero el punto en el texto de derecha a izquierda está al principio de la frase.

Esta propiedad está destinada a texto en idiomas que se lean de en una dirección determinada.

Y hasta aquí el formato de texto. Espero que hayáis aprendido mucho. Saludos 🙂