CSS tiene multitud de propiedades para formatear texto.

Color del texto

La propiedad color es usada para dar color al texto. El color puede ser especificado de las siguientes maneras:

  • Un nombre de color, como "red"
  • Un valor HEX, como "#ff0000"
  • Un valor RGB, como rgb(255,0,0)

Color de texto y color de fondo del texto

En este ejemplo, definimos tanto la propiedad de color de fondo como la propiedad de color del texto.

Ejm

body {
  background-color: lightgrey;
  color: blue;
}

h1 {
  background-color: black;
  color: white;
}

div {
  background-color: blue;
  color: white;
}

Importante: El alto contraste es muy importante para las personas con problemas de visión. Por lo tanto, asegúrate siempre de que el contraste entre el color del texto y el color de fondo (o la imagen de fondo) sea bueno.

Alineamiento del texto

En este capítulo aprenderemos mas acerca de las siguientes propiedades:

  • text-align
  • text-align-last
  • direction
  • unicode-bidi
  • vertical-align

text-align

La propiedad text-align se utiliza para establecer la alineación horizontal de un texto. Un texto puede estar alineado a la izquierda o a la derecha, centrado o justificado. El siguiente ejemplo muestra texto alineado al centro y alineado a la izquierda y a la derecha (la alineación a la izquierda es la predeterminada si la dirección del texto es de izquierda a derecha, y la alineación a la derecha es la predeterminada si la dirección del texto es de derecha a izquierda).

Ejm

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

Cuando la propiedad text-align se establece en justify, cada línea se estira para que cada línea tenga el mismo ancho, y los márgenes izquierdo y derecho son rectos (como en revistas y periódicos).

Ejm

div {
  text-align: justify;
}

text-align-last

La propiedad text-align-last especifica cómo alinear la última línea de un texto.

Ejm

p.a {
  text-align-last: right;
}

p.b {
  text-align-last: center;
}

p.c {
  text-align-last: justify;
}

Dirección del texto

Las propiedades direction y unicode-bidi se pueden usar para cambiar la dirección del texto de un elemento.

Ejm

{
  direction: rtl;
  unicode-bidi: bidi-override;
}

Alineamiento vertical

La propiedad vertical-align establece la alineación vertical de un elemento.

Ejm

img.a {
  vertical-align: baseline;
}

img.b {
  vertical-align: text-top;
}

img.c {
  vertical-align: text-bottom;
}

img.d {
  vertical-align: sub;
}

img.e {
  vertical-align: super;
}