Texto CSS

Formateo de texto

A este texto se le ha dado estilos con algunas propiedades para el formateo de texto. El encabezado utiliza las propiedades para centrarlo, transformarlo en mayúsculas y el color. El párrafo utiliza las propiedades para endentarlo, justificarlo y espaciarlo entre letras. El subrayado de la siguiente liga es removido tutoriales exasoluciones.

Color de Texto

La propiedad color es usada para especificar el color del texto. Con CSS, un color es comúnmente especificado como:

un valor hexadecimal como: #ff0000.
un valor RGB como: rgb(255,0,0).
un nombre de color como: red, blue o green.

El color de texto predeterminado de una página es definido en el selector body.

body {
  color: blue;
}
h1 {
  color: green;
}

Alineamiento de texto

La propiedad text-align es usada para el alineamiento de texto horizontalmente. Un texto puede ser alineado a la izquierda, centrado, a la derecha o justificado.

El siguiente ejemplo muestra como es alineado un texto al centro, a la izquierda y a la derecha respectivamente:

h1 {
  text-align: center;
}
h2 {
  text-align: left;
}
h3 {
  text-align: right;
}

Cuando la propiedad text-align es establecida en "justify" (justificado), cada línea es estirada de manera que cada línea tiene el mismo ancho y sus márgenes izquierdo y derecho quedan rectos (como en revistas y periódicos).

Ejemplo:

div {
  text-align: justify;
}

Decoración del texto

La propiedad text-decoration es usada para establecer o remover decoraciones al texto. Regularmente el valor "none" es usado para remover los subrayados a las ligas (links) como mostramos a continuación:

a {
  text-decoration: none;
}

Otros valores para text-decoration son: "overline" (sobre línea), line-through (tachado) o underline (subrayado) como mostramos en el siguiente ejemplo:

h1 {
  text-decoration: overline;
}
h2 {
  text-decoration: line-through;
}
h3 {
  text-decoration: underline;
}

Nota: no se recomienda utilizar subrayado a texto que no es una liga (link), esto dado a que puede ser confuso para el visitante del sitio.

Transformación de texto

La propiedad text-transform es usada para especificar texto en mayúsculas o minúsculas. Esto puede ser usado para cambiar todo el texto en mayúsculas o minúsculas, o mostrar en mayúscula la primera letra de cada palabra.

Ejemplo:

p.mayusculas {
  text-transform: uppercase;
}
p.minusculas {
  text-transform: lowercase;
}
p.capitalira {
  text-transform: capitalize;
}

Texto con Sangría

La propiedad text-indent es usada para dar sangría a la primer línea de un texto:

p {
  text-indent: 40px;
}

Espaciado de letras

La propiedad letter-spacing es usada para dar espacio entre un caracter a otro en un texto. En el siguiente ejemplo mostramos como incrementar y decrementar el espaciado de letras en un texto:

h1 {
  letter-spacing: 3px;
}
h2 {
  letter-spacing: -3px;
}

Alto de líneas

La propiedad line-height es usada para especificar el espacio entre líneas:

p.pequeno {
  line-height: 0.8;
}
p.grande {
  line-height:1.8;
}

Dirección del texto

La propiedad direction cambia la dirección del texto de un elemento, o dicho de otra manera, carga el texto a la izquierda o derecha dentro de un elemento:

div{
  direction: rtl;
}

Espaciado de Palabras

La propiedad word-spacing es usada para especificar el espacio entre palabras en un texto. el siguiente ejemplo muestra como incrementar y decrementar el espaciado entre palabras en un texto:

h1 {
  word-spacing: 10px;
}
h2 {
  word-spacing: -5px;
}