Texto CSS

Aquí veremos propiedades que pueden ayudarte a dar estilo a tu texto

Color del texto

La propiedad color se usa para establecer el color del texto. Para especificar el color puedes usar un nombre de color (red), un valor HEX (#ff0000) o un valor RGB (rgb (255,0,0) ).

Ejemplo de la propiedad color:.

Ejemplo de uso de la propiedad CSS color:

html

<!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>

Try it Yourself »

Resultado

Text Color

Alineación del texto

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

La alineación del texto tiene cuatro valores:

Izquierda (text-align: left) - alinea el texto a la izquierda
Derecha (text-align: right) - alinea el texto a la derecha
Centro (text-align: center) - coloca el texto en el centro de la página
Justificado (text-align: justify) - estira la línea de texto para alinear ambos extremos, izquierdo y derecho (como en revistas y periódicos)

Los navegadores, de forma predeterminada, alinean el texto a la izquierda, y si es necesario alinearlo a la derecha o colocarlo en el centro, debemos usar el valor correspondiente.

Ejemplo de la propiedad text-alignment:

Ejemplo de uso de la propiedad CSS text-alignment:

html

<!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>

Try it Yourself »

Decoración del texto

La decoración del texto se usa para establecer la decoración del texto. En CSS3, es una abreviatura de las propiedades CSS text-decoration-line, CSS text-decoration-color y CSS text-decoration-style.

La propiedad decoration se usa para especificar decoraciones de línea añadidas al texto. Los siguientes valores son válidos para la propiedad text-decoration.

Línea superior (text-decoration:overline) - cada línea de texto tiene una línea encima
Subrayado (text-decoration:underline) - cada línea de texto está subrayada
Tachado (text-decoration:line-through) - cada línea de texto tiene una línea que la atraviesa
Ninguno (text-decoration:none) - no se aplica ninguna decoración al texto

Ejemplo de la propiedad text-decoration:

Ejemplo de uso de la propiedad CSS text-decoration:

html

<!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>

Try it Yourself »

Resultado

Text Decoration

Transformación del texto

La propiedad transform se usa para controlar las mayúsculas y minúsculas del texto. Esto significa que puedes establecer tu texto en mayúsculas, minúsculas o con mayúscula inicial (tipo título).

La propiedad transform tiene los siguientes valores:

Mayúsculas (text-transform: uppercase) - convierte todos los caracteres a mayúsculas
Minúsculas (text-transform: lowercase) - convierte todos los caracteres a minúsculas
Capitalizar (text-transform: capitalize) - convierte el primer carácter de cada palabra a mayúscula

Ejemplo de la propiedad text-transform:

Ejemplo de uso de la propiedad CSS text-transform:

html

<!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>

Try it Yourself »

Resultado

Text Transform

Sombra del texto

Usamos la propiedad text-shadow cuando queremos dar sombra a nuestro texto.

La propiedad shadow se usa para aplicar varios efectos de sombra al texto. Acepta una lista de valores. Cada elemento de la lista puede tener dos o más valores separados por comas.

La sintaxis de la propiedad text shadow puede verse así

Ejemplo de la propiedad CSS text-shadow

css

text-shadow: h-shadow v-shadow blur color

Aquí puedes ver ejemplos de sombra de texto.

Sangría del texto

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

Longitud, que especifica la sangría en px, pt, cm, em, etc. El valor predeterminado es 0. Se permiten valores negativos.
Porcentaje, que especifica la sangría en porcentaje del ancho del bloque contenedor.
Each-line, cuando la sangría afecta a la primera línea así como a cada línea después de un salto de línea forzado, pero no afecta a las líneas después de un salto de línea automático.
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 la propiedad text-indent:

Ejemplo de la propiedad text-indent

html

<!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>

Try it Yourself »

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 caracteres. Es el valor predeterminado de esta propiedad.
Longitud, que define un espacio extra entre 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 la propiedad letter-spacing:

Ejemplo de la propiedad letter-spacing

html

<!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>

Try it Yourself »

Altura de línea

La propiedad line-height define la altura de línea. Se usa para establecer el interlineado de las líneas 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 que admite esta propiedad:

Normal, que define una altura de línea normal. Es el valor predeterminado de esta propiedad.
Longitud, que define una altura de línea fija en px, cm, etc.
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 una altura de línea en 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.

Ejemplo de la propiedad line-height:

Ejemplo de la propiedad line-height

html

<!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>

Try it Yourself »

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 entre los caracteres individuales. Admite los valores siguientes:

Normal, que especifica un espaciado normal entre palabras. Este es el valor predeterminado de esta propiedad.
Longitud, que especifica un espaciado extra entre palabras. 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 la propiedad word-spacing:

Ejemplo de la propiedad word-spacing

html

<!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>

Try it Yourself »

Texto CSS ​

Color del texto ​

Ejemplo de la propiedad color:. ​

Resultado ​

Alineación del texto ​

Ejemplo de la propiedad text-alignment: ​

Decoración del texto ​

Ejemplo de la propiedad text-decoration: ​

Resultado ​

Transformación del texto ​

Ejemplo de la propiedad text-transform: ​

Resultado ​

Sombra del texto ​

Sangría del texto ​

Ejemplo de la propiedad text-indent: ​

Espaciado entre letras ​

Ejemplo de la propiedad letter-spacing: ​

Altura de línea ​

Ejemplo de la propiedad line-height: ​

Espaciado entre palabras ​

Ejemplo de la propiedad word-spacing: ​

Practice ​

Texto CSS

Color del texto

Ejemplo de la propiedad color:.

Resultado

Alineación del texto

Ejemplo de la propiedad text-alignment:

Decoración del texto

Ejemplo de la propiedad text-decoration:

Resultado

Transformación del texto

Ejemplo de la propiedad text-transform:

Resultado

Sombra del texto

Sangría del texto

Ejemplo de la propiedad text-indent:

Espaciado entre letras

Ejemplo de la propiedad letter-spacing:

Altura de línea

Ejemplo de la propiedad line-height:

Espaciado entre palabras

Ejemplo de la propiedad word-spacing:

Practice