W3docs
es
Iniciar sesión

Texto en CSS

Fundamentos básicos para dar estilo al texto con CSS: decoración, color, alineación y más. Ejemplos incluidos.

CSS te ofrece un control preciso sobre el aspecto del texto. Esta página repasa las propiedades de texto más utilizadas: qué hace cada una, los valores que acepta y un ejemplo ejecutable mínimo para cada caso. Cada propiedad enlaza a su propio capítulo dedicado donde puedes profundizar.

Color de texto

La propiedad color establece el color del texto de un elemento (y, por defecto, el de sus decoraciones como el subrayado). El valor puede especificarse como una palabra clave de color (red), un valor HEX (#ff0000), un valor rgb() / rgba() (rgb(255 0 0)) o un valor hsl(). Dado que color se hereda, establecerlo en un contenedor se aplica a todo el texto descendiente a menos que un hijo lo sobrescriba.

Ejemplo de uso de la propiedad CSS color:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p style="color:#ff0000">This is some paragraph in red.</p>
  </body>
</html>
Pruébalo tú mismo »

Resultado

Color de texto

Alineación de texto

La propiedad de alineación se utiliza para alinear el texto dentro de un elemento: a la izquierda, a la derecha, al centro, etc.

La alineación de texto tiene cuatro valores:

  • Left (text-align: left) - alinea el texto a la izquierda
  • Right (text-align: right) - alinea el texto a la derecha
  • Center (text-align: center) - centra el texto en la página
  • Justify (text-align: justify) - estira la línea de texto para alinear tanto el extremo izquierdo como el derecho (como en revistas y periódicos)

Por defecto, los navegadores alinean el texto al inicio de la línea — a la izquierda en idiomas de izquierda a derecha como el español. Usa el valor correspondiente cuando necesites una alineación diferente. Para una alineación compatible con el idioma, prefiere las palabras clave lógicas start y end sobre left y right.

Ejemplo de uso de la propiedad CSS text-align:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>This is some paragraph</p>
    <p style="text-align:center">Some paragraph with value center.</p>
    <p style="text-align:right">Some paragraph with value right.</p>
    <p style="text-align:justify">Some paragraph with value justify.</p>
  </body>
</html>
Pruébalo tú mismo »

Decoración de texto

La propiedad text-decoration añade líneas al texto. En CSS moderno es una abreviación de CSS text-decoration-line, CSS text-decoration-color y CSS text-decoration-style. Los valores más comunes para la parte text-decoration-line son:

  • Overline (text-decoration: overline) - dibuja una línea encima del texto
  • Underline (text-decoration: underline) - dibuja una línea debajo del texto
  • Line-through (text-decoration: line-through) - dibuja una línea en el centro del texto
  • None (text-decoration: none) - elimina cualquier decoración; es lo que se usa para quitar el subrayado predeterminado de los enlaces

Ejemplo de uso de la propiedad CSS text-decoration:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a style="text-decoration:none">This is link without underline</a>
    <h1 style="text-decoration:overline">Heading with value overline.</h1>
    <p style="text-decoration:line-through">Some paragraph with value line-through.</p>
    <a style="text-decoration:underline">Some hyperlink with value underline.</a>
  </body>
</html>
Pruébalo tú mismo »

Resultado

Decoración de texto

Transformación de texto

La propiedad transform se utiliza para controlar la capitalización del texto. Esto significa que puedes configurar tu texto en mayúsculas, minúsculas o con mayúscula inicial (título).

La propiedad transform tiene los siguientes valores:

  • Uppercase (text-transform: uppercase) - convierte todos los caracteres a mayúsculas
  • Lowercase (text-transform: lowercase) - convierte todos los caracteres a minúsculas
  • Capitalize (text-transform: capitalize) - convierte el primer carácter de cada palabra a mayúscula
  • None (text-transform: none) - deja el texto tal como fue escrito; este es el valor predeterminado

Ten en cuenta que text-transform solo cambia cómo se muestra el texto — el contenido HTML subyacente permanece exactamente como lo escribiste, lo cual es importante para copiar, pegar y la accesibilidad.

Ejemplo de uso de la propiedad CSS text-transform:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p style="text-transform:uppercase">Paragraph with uppercase.</p>
    <p style="text-transform:lowercase">Paragraph with lowercase.</p>
    <p style="text-transform:capitalize">Paragraph with capitalize.</p>
  </body>
</html>
Pruébalo tú mismo »

Resultado

Transformación de texto

Sombra de texto

La propiedad text-shadow añade una o más sombras al texto. Cada sombra se describe con hasta cuatro valores, en este orden:

text-shadow: h-shadow v-shadow blur-radius color;
  • h-shadow (obligatorio) - desplazamiento horizontal; un valor positivo mueve la sombra a la derecha, un valor negativo a la izquierda.
  • v-shadow (obligatorio) - desplazamiento vertical; un valor positivo mueve la sombra hacia abajo, un valor negativo hacia arriba.
  • blur-radius (opcional) - qué tan difusa es la sombra; valores más grandes la difuminan más (el valor predeterminado es 0).
  • color (opcional) - el color de la sombra; si se omite, el navegador utiliza el color del elemento.

Puedes apilar múltiples sombras separándolas con comas, que es como se crean los efectos de brillo y contorno.

Ejemplo de uso de la propiedad CSS text-shadow:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        text-shadow: 2px 2px 4px #888888;
      }
      h2 {
        /* Two shadows stacked to create a glow */
        text-shadow: 0 0 6px #ff0000, 0 0 12px #ff0000;
      }
    </style>
  </head>
  <body>
    <h1>Heading with a soft drop shadow</h1>
    <h2>Heading with a red glow</h2>
  </body>
</html>

Consulta el capítulo CSS text-shadow para más ejemplos.

Sangría de texto

La propiedad de sangría de texto se utiliza para especificar la longitud del espacio vacío en la primera línea de un bloque de texto. Los siguientes valores son válidos para esta propiedad:

  • Length (longitud), que especifica la sangría en px, pt, cm, em, etc. El valor predeterminado es 0. Se permiten valores negativos.
  • Percentage (porcentaje), que especifica la sangría como porcentaje del ancho del bloque contenedor.
  • Each-line, cuando la sangría afecta la primera línea así como cada línea tras un salto de línea forzado, pero no afecta las líneas tras un salto de ajuste suave.
  • Hanging, que invierte qué líneas tienen sangría. La primera línea no tiene sangría.
  • Initial, que hace que la propiedad use su valor predeterminado.
  • Inherit, que hereda la propiedad del elemento padre.

Ejemplo de uso de la propiedad CSS text-indent:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-indent: 100px;
        line-height: 24px;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <h2>Text Indentation Example</h2>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>
Pruébalo tú mismo »

Espaciado entre letras

La propiedad CSS letter-spacing permite definir los espacios entre letras/caracteres en un texto. Esta propiedad admite los siguientes valores:

  • Normal, que significa que no habrá espacios extra entre los caracteres. Es el valor predeterminado de esta propiedad.
  • Length (longitud), que define un espacio adicional entre los caracteres. Se permiten valores negativos.
  • Initial, que hace que la propiedad use su valor predeterminado.
  • Inherit, que hereda la propiedad del elemento padre.

Ejemplo de uso de la propiedad CSS letter-spacing:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-indent: 100px;
        line-height: 24px;
        font-size: 16px;
        letter-spacing: 5px;
      }
      h3 {
        letter-spacing: -1px;
      }
    </style>
  </head>
  <body>
    <h2>Example of letter-spacing property</h2>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <h3>
      Here is some text with letter-spacing property.
    </h3>
  </body>
</html>
Pruébalo tú mismo »

Altura de línea

La propiedad line-height define la altura de línea. Se utiliza para establecer el interlineado de un texto. Si el valor de line-height es mayor que el valor de font-size de un elemento, la diferencia será el interlineado del texto. Estos son los valores admitidos por esta propiedad:

  • Normal, que define una altura de línea normal. Es el valor predeterminado de esta propiedad.
  • Length (longitud), que define una altura de línea fija en px, cm, etc.
  • Number (número), que define un número que se multiplica por el tamaño de fuente actual para establecer la altura de línea.
  • %, que define la altura de línea como porcentaje del tamaño de fuente actual.
  • Initial, que hace que la propiedad use su valor predeterminado.
  • Inherit, que hereda la propiedad del elemento padre.

Un valor number sin unidad (por ejemplo line-height: 1.5) suele ser la opción más segura, ya que escala con el tamaño de fuente propio de cada elemento y evita sorpresas de herencia.

Ejemplo de uso de la propiedad CSS line-height:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        line-height: 30px;
      }
      h3 {
        line-height: 1;
      }
    </style>
  </head>
  <body>
    <h2>Example of line-height property</h2>
    <p> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. </p>
    <h3>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </h3> 
  </body>
</html>
Pruébalo tú mismo »

Espaciado entre palabras

Con la ayuda de la propiedad CSS word-spacing podemos cambiar el espacio entre las palabras en un fragmento de texto, no los caracteres individuales. Admite los siguientes valores:

  • Normal, que especifica el espaciado de palabras normal. Este es el valor predeterminado de esta propiedad.
  • Length (longitud), que especifica un espaciado de palabras adicional. Puede especificarse en px, pt, cm, em, etc. Los valores negativos son válidos.
  • Initial, que hace que la propiedad use su valor predeterminado.
  • Inherit, que hereda la propiedad del elemento padre.

Ejemplo de uso de la propiedad CSS word-spacing:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        word-spacing: 1em;
      }
      h3 {
        word-spacing: -3px;
      }
      span {
        display: block;
        word-spacing: 3rem;
      }
    </style>
  </head>
  <body>
    <h2>Example of word-spacing property</h2>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <h3>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </h3>
    <span>
    Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.
    </span>
  </body>
</html>
Pruébalo tú mismo »

Práctica

Práctica
¿Cuál de las siguientes propiedades puedes usar para controlar la apariencia del texto en CSS?
¿Cuál de las siguientes propiedades puedes usar para controlar la apariencia del texto en CSS?
Was this page helpful?