CSS Text

La propiedad text en CSS se utiliza para establecer varios estilos de texto en un elemento HTML, como el color, la fuente, el tamaño, entre otros.

Puedes utilizar esta propiedad para aplicar estilos a todo el texto dentro de un elemento específico, o utilizar selectores más específicos para aplicar estilos solo a partes específicas del texto.

Algunos ejemplos de cómo utilizar la propiedad text incluyen:

  • color: blue; para cambiar el color del texto a azul
  • font-size: 20px; para aumentar el tamaño del texto a 20 pixels
  • text-align: center; para centrar el texto dentro del elemento

Ejemplo de uso

Aquí tienes un ejemplo de cómo utilizar la propiedad text en CSS junto con un código HTML:

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      font-family: Arial, sans-serif;
      font-size: 16px;
      text-align: center;
    }
  
    .highlight {
      color: blue;
      text-decoration: underline;
    }
  
    .uppercase {
      text-transform: uppercase;
    }
  
  </style>
</head>
<body>
  <div class="container">
    <p>Bienvenido a mi <span class="highlight">sitio web</span>.</p>
    <p>Aquí encontrarás <span class="uppercase">información interesante</span> sobre mi trabajo.</p>
  </div>
</body>
</html>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, hemos definido varias clases en el CSS, que se aplican a diferentes elementos en el HTML.

Utilizamos la clase container para establecer la fuente como Arial, el tamaño de la fuente como 16 pixels y alinear el texto al centro.

Luego, utilizamos la clase highlight para resaltar el texto “sitio web” con un color azul y una línea debajo. Y la clase uppercase para convertir el texto “información interesante” a mayúsculas.

En este ejemplo se aplican estilos generales a todo el contenido dentro del contenedor y estilos específicos solo a partes específicas del texto.

Espero que este ejemplo te ayude a entender cómo utilizar la propiedad text en CSS junto con HTML de manera más completa.

Propiedades relacionadas

Existen varias propiedades relacionadas con la propiedad text en CSS que te permiten controlar diferentes aspectos de la presentación del texto en una página web. Algunas de las propiedades más comunes incluyen:

  • color: Establece el color del texto. Puedes usar cualquier valor de color válido, como nombres de colores, códigos de colores hexadecimales o RGB.
  • font-size: Establece el tamaño de la fuente. Puedes usar cualquier tamaño válido, como pixels, puntos o ems.
  • font-family: Establece la familia de fuentes. Puedes usar cualquier nombre de fuente válido, como “Arial”, “Times New Roman”, o “Helvetica”.
  • font-weight: Establece el grosor de la fuente. Puedes usar valores numéricos del 100 al 900 o los valores normal y bold.
  • font-style: Establece el estilo de la fuente. Puedes usar los valores normal, italic y oblique.
  • text-align: Establece la alineación del texto. Puedes usar los valores left, right, center, y justify.
  • text-decoration: Establece las decoraciones del texto. Puedes usar los valores none, underline, overline, line-through y underline overline.
  • letter-spacing: Establece el espaciado entre letras. Puedes usar cualquier valor numérico válido, como pixels o ems.
  • line-height: Establece la altura de línea. Puedes usar cualquier valor numérico válido, como pixels o ems.
  • text-transform: Establece la transformación del texto. Puedes usar los valores none, uppercase, lowercase y capitalize.
  • text-shadow: Establece la sombra del texto. Puedes usar cuatro valores: offset-x | offset-y | blur-radius | color
  • text-overflow: Establece cómo se maneja el texto que excede el tamaño del contenedor. Puedes usar los valores clip, ellipsis, y string.
  • white-space: Establece cómo se maneja el espacio en blanco. Puedes usar los valores normal, nowrap, pre, pre-line, y pre-wrap.
  • word-wrap: Establece cómo se maneja el texto que se divide en varias líneas. Puedes usar los valores normal y break-word.
  • word-spacing: Establece el espaciado entre palabras. Puedes usar cualquier valor numérico válido, como pixels o ems.
  • text-indent: Establece el sangrado del primer párrafo dentro de un elemento. Puedes usar cualquier valor numérico válido, como pixels o ems.
  • text-justify: Establece cómo se justifica el texto en caso de que la alineación sea ‘justify’
  • text-orientation: Establece la orientación del texto. Puedes usar los valores mixed, upright, sideways y sideways-right
  • text-rendering: Establece la calidad de renderizado del texto, puedes usar los valores auto, optimizeSpeed, optimizeLegibility y geometricPrecision
  • text-size-adjust: Establece el ajuste automático del tamaño del texto, puedes usar los valores auto y un valor numérico para establecer un porcentaje específico.
  • text-underline-position: Establece la posición de la línea de subrayado del texto, puedes usar los valores auto, under y left
  • word-break: Establece como se divide una palabra al llegar al final de una línea, puedes usar los valores normal y break-all

Estas son solo algunas de las propiedades relacionadas con text en CSS, pero hay muchas más opciones disponibles para controlar la presentación del texto en una página web.

Color de texto

La propiedad color en CSS se utiliza para establecer el color del texto en un elemento HTML. Puedes especificar el color utilizando varios formatos diferentes, como:

  • Nombres de colores: Puedes utilizar nombres de colores predefinidos, como “red”, “blue”, “green”, etc.
  • Códigos de colores hexadecimales: Puedes usar un código de seis dígitos que representa el valor de color en formato hexadecimal, como “#ff0000” para el rojo.
  • Códigos de colores RGB: Puedes usar una notación RGB para especificar el color, como “rgb(255, 0, 0)” para el rojo.
  • Códigos de colores RGBA: Puedes usar una notación RGBA para especificar el color y la transparencia, como “rgba(255, 0, 0, 0.5)” para un rojo semitransparente.
  • Valores HSL: Puedes usar una notación HSL para especificar el color, como “hsl(0, 100%, 50%)” para el rojo.
  • Valores HSLA: Puedes usar una notación HSLA para especificar el color y la transparencia, como “hsla(0, 100%, 50%, 0.5)” para un rojo semitransparente.

Ejemplo:

p {
  color: blue;
}
Lenguaje del código: CSS (css)

En este ejemplo se establece el color de texto de todos los elementos p como azul.

Es importante notar que también puedes establecer el color de texto utilizando clases o identificadores específicos en lugar de aplicarlo a todos los elementos de un tipo específico.

Ejemplos

Aquí tienes algunos ejemplos de cómo usar la propiedad color en CSS para establecer el color del texto en diferentes elementos HTML:

  • Para establecer el color del texto en todos los encabezados (h1-h6) en rojo:
h1, h2, h3, h4, h5, h6 {
  color: red;
}
Lenguaje del código: CSS (css)
  • Para establecer el color del texto en un elemento con una clase específica en verde:
.mi-clase {
  color: green;
}
Lenguaje del código: CSS (css)
  • Para establecer el color del texto en un elemento con un id específico en azul:
#mi-id {
  color: blue;
}
Lenguaje del código: CSS (css)
  • Establecer el color del texto en un elemento con un código hexadecimal #f9a03f
p {
  color: #f9a03f;
}
Lenguaje del código: CSS (css)
  • Establecer el color del texto en un elemento con un código RGB (255,0,0)
p {
  color: rgb(255,0,0);
}
Lenguaje del código: CSS (css)
  • Establecer el color del texto en un elemento con un código RGBA (255,0,0,0.5)
p {
  color: rgba(255,0,0,0.5);
}
Lenguaje del código: CSS (css)

Estos son solo algunos ejemplos básicos de cómo usar la propiedad color en CSS, pero hay muchas otras formas de usarla para controlar la presentación del texto en una página web.

Por ejemplo, también puedes usar la propiedad color en conjunto con otras propiedades como :hover, :active, :visited, etc. para cambiar el color del texto cuando el usuario interactúa con un elemento de la página. Por ejemplo:

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:hover {
  color: red;
}

a:active {
  color: yellow;
}
Lenguaje del código: CSS (css)

En este ejemplo, se establece el color del texto de los enlaces a como azul cuando se ha visitado por primera vez, morado cuando se ha visitado antes, rojo cuando el usuario los pasa el cursor encima y amarillo cuando se hace clic sobre ellos.

Alineación y dirección de texto

Alineación de texto

La propiedad text-align en CSS se utiliza para establecer la alineación del texto en un elemento HTML. Puedes especificar la alineación utilizando los siguientes valores:

  • left: El texto se alinea a la izquierda del elemento.
  • right: El texto se alinea a la derecha del elemento.
  • center: El texto se centra dentro del elemento.
  • justify: El texto se justifica dentro del elemento.

Ejemplo:

p {
  text-align: center;
}
Lenguaje del código: CSS (css)

En este ejemplo, el texto dentro de todos los elementos p se centrará dentro del elemento.

Es importante notar que la propiedad text-align también puede aplicarse a elementos de bloque como div, header, footer, section, etc.

Ejemplo:

.mi-clase {
  text-align: right;
}
Lenguaje del código: CSS (css)

En este ejemplo, el texto dentro de todos los elementos con la clase mi-clase se alineará a la derecha.

Si deseas aplicar una alineación de texto a un elemento específico, puedes utilizar una clase o un id para seleccionarlo y aplicar la propiedad text-align.

También es importante mencionar que esta propiedad afecta solo al texto dentro del elemento, no a las imágenes o cualquier otro tipo de contenido.

Alinear texto al final

La propiedad text-align-last en CSS se utiliza para establecer la alineación del último renglón de texto en un elemento HTML cuando el texto se justifica (text-align: justify). Puedes especificar la alineación utilizando los siguientes valores:

  • auto: El navegador decide cómo alinear el último renglón de texto. Este es el valor predeterminado.
  • left: El último renglón de texto se alinea a la izquierda.
  • right: El último renglón de texto se alinea a la derecha.
  • center: El último renglón de texto se centra.
  • justify: El último renglón de texto se justifica igual que el resto del texto.

Ejemplo:

Aquí hay algunos ejemplos adicionales de cómo usar la propiedad text-align-last:

  • Para alinear el último renglón de un párrafo justificado al centro:
p {
  text-align: justify;
  text-align-last: center;
}
Lenguaje del código: CSS (css)
  • Para alinear el último renglón de un párrafo justificado a la izquierda:
p {
  text-align: justify;
  text-align-last: left;
}
Lenguaje del código: CSS (css)
  • Para usar el valor predeterminado de text-align para determinar la alineación del último renglón:
p {
  text-align: justify;
  text-align-last: auto;
}
Lenguaje del código: CSS (css)
  • Para alinear el último renglón de una lista de puntos justificada a la derecha:
ul {
  text-align: justify;
  text-align-last: right;
}
Lenguaje del código: CSS (css)

Nota: Recuerda que text-align-last solo se aplica cuando el valor de text-align es “justify” y en algunos navegadores puede no ser soportado.

Dirección del texto

La propiedad CSS direction establece la dirección del texto en un elemento. Los valores posibles son “ltr” (izquierda a derecha) y “rtl” (derecha a izquierda).

El valor predeterminado es “ltr”. Esta propiedad afecta a todo el contenido del elemento, incluyendo las imágenes y las tablas.

La propiedad unicode-bidi se utiliza para controlar la dirección de caracteres específicos dentro de un elemento de texto. Los valores posibles son “normal” y “embed”. El valor predeterminado es “normal”.

  • normal se aplica la dirección establecida por la propiedad direction al elemento.
  • embed es utilizado para anidar contenido con una dirección diferente dentro de un elemento con una dirección establecida.

Ejemplo:

Aquí hay un ejemplo sencillo de cómo utilizar la propiedad direction y unicode-bidi en HTML:

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Establece la dirección del texto en el elemento "p" como "rtl" (derecha a izquierda) */
      p {
        direction: rtl;
      }
      /* Establece la dirección del texto en el elemento "span" como "ltr" (izquierda a derecha) */
      span {
        unicode-bidi: embed;
        direction: ltr;
      }
    </style>
  </head>
  <body>
    <p>
      <span>123</span>456
    </p>
  </body>
</html>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, se establece la dirección del texto en el elemento “p” como “rtl” (derecha a izquierda) y se establece la dirección del texto dentro del elemento “span” como “ltr” (izquierda a derecha).

Con la propiedad “unicode-bidi” como “embed”, lo que significa que se mostrará el contenido dentro del elemento “span” en una dirección diferente a la del elemento padre “p”.

El resultado es: “654 321” donde el número 123 se mostrará de izquierda a derecha y el 456 se mostrará de derecha a izquierda.

Alineamiento vertical de texto

La propiedad CSS vertical-align es utilizada para alinear el contenido dentro de un elemento de manera vertical. Esta propiedad se aplica a elementos en línea y elementos tabulares.

El valor predeterminado es “baseline” (línea de base), que alinea el contenido al nivel de la línea de base del texto en el elemento.

Los valores posibles son:

  • baseline: alinea el contenido al nivel de la línea de base del texto en el elemento.
  • top: alinea el contenido al borde superior del elemento.
  • middle: alinea el contenido en el centro del elemento.
  • bottom: alinea el contenido al borde inferior del elemento.
  • text-top: alinea el contenido al nivel de la línea superior del texto en el elemento.
  • text-bottom: alinea el contenido al nivel de la línea inferior del texto en el elemento.
  • Valor numérico: puedes especificar un valor numérico para mover el contenido hacia arriba o hacia abajo en relación a la línea de base. Los valores negativos mueven el contenido hacia arriba y los valores positivos mueven el contenido hacia abajo.

Ejemplo:

Aquí hay algunos ejemplos de cómo utilizar los diferentes valores de la propiedad vertical-align en CSS:

example1 {
  font-size: 20px;
  vertical-align: baseline;
}
Lenguaje del código: CSS (css)

En este ejemplo, el contenido dentro del elemento con la clase “example1” se alineará al nivel de la línea de base del texto.

.example2 {
  font-size: 20px;
  vertical-align: top;
}
Lenguaje del código: CSS (css)

En este ejemplo, el contenido dentro del elemento con la clase “example2” se alineará al borde superior del elemento.

.example3 {
  font-size: 20px;
  vertical-align: middle;
}
Lenguaje del código: CSS (css)

En este ejemplo, el contenido dentro del elemento con la clase “example3” se alineará en el centro del elemento.

.example4 {
  font-size: 20px;
  vertical-align: bottom;
}
Lenguaje del código: CSS (css)

En este ejemplo, el contenido dentro del elemento con la clase “example4” se alineará al borde inferior del elemento.

.example5 {
  font-size: 20px;
  vertical-align: text-top;
}
Lenguaje del código: CSS (css)

En este ejemplo, el contenido dentro del elemento con la clase “example5” se alineará al nivel de la línea superior del texto en el elemento.

.example6 {
  font-size: 20px;
  vertical-align: text-bottom;
}
Lenguaje del código: CSS (css)

En este ejemplo, el contenido dentro del elemento con la clase “example6” se alineará al nivel de la línea inferior del texto en el elemento.

.example7 {
  font-size: 20px;
  vertical-align: -10px;
}
Lenguaje del código: CSS (css)

En este ejemplo, el contenido dentro del elemento con la clase “example7” se moverá 10px hacia arriba con relación a la línea de base del elemento.

Recuerda que estos son solo ejemplos y debes personalizar los valores según tus necesidades y diseño.

Decoración de texto

La propiedad CSS text-decoration se utiliza para decorar el texto de un elemento. Esta propiedad se utiliza para agregar decoraciones como subrayado, tachado, o sobrerayado al texto. El valor predeterminado es «none» (ninguno), lo que significa que no se aplica ninguna decoración al texto.

Los valores comunes incluyen:

  • none: no se aplica ninguna decoración al texto
  • underline: se aplica un subrayado debajo del texto
  • overline: se aplica una línea encima del texto
  • line-through: se aplica una línea que atraviesa el texto
  • blink: hace que el texto parpadee

También es posible especificar varios valores separados por un espacio para aplicar más de una decoración al texto, por ejemplo:

text-decoration: underline overline;

Lenguaje del código: CSS (css)

Propiedades relacionadas

Hay varias propiedades relacionadas con “text-decoration” en CSS que te permiten personalizar aún más la decoración del texto:

Aquí está una lista de las propiedades relacionadas con “text-decoration” en CSS:

  • text-decoration-color
  • text-decoration-line
  • text-decoration-style
  • text-decoration-skip
  • text-decoration-thickness
  • text-decoration-offset

Cada una de estas propiedades te permite personalizar la decoración del texto en diferentes aspectos como el color, el estilo, el grosor, la distancia entre la decoración y el texto, entre otros.

Ejemplos:

Algunos ejemplos de cómo utilizar las propiedades relacionadas con “text-decoration” en CSS con código HTML y CSS:

<p class="example1">Este es un ejemplo de text-decoration-color</p>
Lenguaje del código: CSS (css)
.example1 {
  text-decoration: underline;
  text-decoration-color: red;
}
Lenguaje del código: CSS (css)

En este ejemplo, se aplica un subrayado debajo del texto con el color rojo, utilizando la propiedad “text-decoration-color”.

<p class="example2">Este es un ejemplo de text-decoration-line</p>
Lenguaje del código: HTML, XML (xml)
.example2 {
  text-decoration-line: underline line-through;
}
Lenguaje del código: CSS (css)

En este ejemplo, se aplica un subrayado y una línea que atraviesa el texto, utilizando la propiedad “text-decoration-line”.

<p class="example3">Este es un ejemplo de text-decoration-style</p>
Lenguaje del código: HTML, XML (xml)
.example3 {
  text-decoration: underline;
  text-decoration-style: dotted;
}
Lenguaje del código: CSS (css)

En este ejemplo, se aplica un subrayado con un estilo punteado, utilizando la propiedad “text-decoration-style”.

<p class="example4">Este es un ejemplo de text-decoration-skip</p>
Lenguaje del código: HTML, XML (xml)
.example4 {
  text-decoration: underline;
  text-decoration-skip: spaces;
}
Lenguaje del código: CSS (css)

En este ejemplo, se subraya solo el primer carácter de cada palabra, utilizando la propiedad “text-decoration-skip”.

<p class="example5">Este es un ejemplo de text-decoration-thickness</p>
Lenguaje del código: HTML, XML (xml)
.example5 {
  text-decoration: underline;
  text-decoration-thickness: 3px;
}
Lenguaje del código: CSS (css)

En este ejemplo, se aplica un subrayado con un grosor de 3px, utilizando la propiedad “text-decoration-thickness”.


<p class="example6">Este es un ejemplo de text-decoration-offset</p>

Lenguaje del código: HTML, XML (xml)
.example6 {
  text-decoration: underline;
  text-decoration-offset: 5px;
}
Lenguaje del código: CSS (css)

En este ejemplo, se aplica un subrayado con una distancia de 5px entre el subrayado y el texto, utilizando la propiedad “text-decoration-offset”.

Es importante tener en cuenta que algunas de estas propiedades solo funcionan en navegadores específicos o solo están disponibles en versiones más recientes de los navegadores, por lo que es recomendable verificar la compatibilidad antes de utilizarlas en un proyecto.

Transformación de texto

La propiedad “text-transform” de CSS se utiliza para aplicar un formato específico al texto. Puede ser utilizado para convertir el texto en mayúsculas, minúsculas o capitalizar cada palabra. La sintaxis de esta propiedad es:

  • none es el valor predeterminado y no aplica ningún cambio al texto.
  • capitalize convierte la primera letra de cada palabra en mayúscula y el resto del texto en minúsculas.
  • uppercase convierte todo el texto en mayúsculas.
  • lowercase convierte todo el texto en minúsculas.

Ejemplos:

Aquí hay algunos ejemplos de cómo utilizar la propiedad “text-transform” en CSS con diferentes valores:

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}
Lenguaje del código: CSS (css)

Espaciado de texto

Hay varias propiedades en CSS que se pueden utilizar para controlar el espaciado de texto. Algunas de las más comunes son:

  • letter-spacing: Esta propiedad aumenta o disminuye el espacio entre las letras. Puede utilizar unidades como px, em, rem, etc.
p {
  letter-spacing: 2px;
}
Lenguaje del código: CSS (css)
  • word-spacing: Esta propiedad aumenta o disminuye el espacio entre las palabras. Puede utilizar unidades como px, em, rem, etc.
p {
  word-spacing: 10px;
}
Lenguaje del código: CSS (css)
  • line-height: Esta propiedad aumenta o disminuye el espacio entre las líneas de texto. Puede utilizar unidades como px, em, rem, etc. o una proporción (como «1.5»).
p {
  line-height: 1.5;
}
Lenguaje del código: CSS (css)
  • text-indent: Esta propiedad aumenta o disminuye el espacio de sangría al comienzo de un párrafo. Puede utilizar unidades como px, em, rem, etc.
p {
  text-indent: 20px;
}
Lenguaje del código: CSS (css)
  • white-space: Se utiliza para controlar cómo se manejan los espacios en blanco en un elemento de texto. Esta propiedad tiene diferentes valores que pueden ser utilizados para especificar cómo se deben manejar los espacios en blanco en un elemento de texto. Los valores comunes son:
    • normal: este es el valor predeterminado y significa que el navegador se encarga automáticamente del espaciado de texto, eliminando los saltos de línea y los espacios en blanco adicionales.
    • pre: mantiene los espacios en blanco y los saltos de línea tal y como se escriben en el código HTML. Es útil para mostrar código fuente o preformatear texto.
    • nowrap: previene que el texto se desborde a la siguiente línea, forzando todo el texto a permanecer en una sola línea.
    • pre-wrap: combina los efectos de “pre” y “normal”, manteniendo los saltos de línea y los espacios en blanco, pero también permitiendo que el texto se desborde a la siguiente línea cuando sea necesario.
    • pre-line: combina los efectos de “pre” y “normal”, eliminando los espacios adicionales y permitiendo que el texto se desborde a la siguiente línea cuando sea necesario, pero conservando los saltos de línea.
/*Este ejemplo mantiene los espacios en blanco y saltos de línea tal y como se escriben en el código HTML. Es útil para mostrar código fuente o preformatear texto.*/
.preformatted {
  white-space: pre;
}

/*Este ejemplo previene que el texto se desborde a la siguiente línea, forzando todo el texto a permanecer en una sola línea.*/
.nowrap {
  white-space: nowrap;
}

/*Este ejemplo combina los efectos de "pre" y "normal", manteniendo los saltos de línea y los espacios en blanco, pero también permitiendo que el texto se desborde a la siguiente línea cuando sea necesario.*/
.pre-wrap {
  white-space: pre-wrap;
}

/*Este ejemplo elimina los saltos de línea y los espacios en blanco adicionales y permite que el navegador maneje el espacio en blanco de manera automática.*/
.normal {
  white-space: normal;
}
Lenguaje del código: CSS (css)

La propiedad «white-space» es muy útil para controlar el formato de texto en una página web, especialmente cuando se trata de mostrar código fuente o preformatear texto.

Ten en cuenta que algunas de estas propiedades solo funcionan en navegadores específicos o solo están disponibles en versiones más recientes de los navegadores, por lo que es recomendable verificar la compatibilidad antes de utilizarlos en un proyecto.

Sombra de texto

La propiedad «text-shadow» de CSS se utiliza para añadir sombras a los textos. La sintaxis para esta propiedad es la siguiente:

text-shadow: h-shadow v-shadow blur color;
Lenguaje del código: texto plano (plaintext)

Donde:

  • “h-shadow” es la posición horizontal de la sombra en relación al texto (puede ser un valor negativo para mover la sombra hacia la izquierda).
  • “v-shadow” es la posición vertical de la sombra en relación al texto (puede ser un valor negativo para mover la sombra hacia arriba).
  • “blur” es la cantidad de desenfoque de la sombra.
  • “color” es el color de la sombra.

Ejemplo:

h1 {
  text-shadow: 3px 2px 2px #ccc;
}
Lenguaje del código: CSS (css)

En este ejemplo, se establece una sombra horizontal de 3px, una sombra vertical de 2px, un desenfoque de 2px y un color de #ccc para el elemento h1.

También se pueden aplicar varias sombras con un solo valor de «text-shadow», separando cada sombra con una coma.

h1 {
  text-shadow: 3px 2px 2px #ccc, -1px -1px 2px #666;
}
Lenguaje del código: CSS (css)

En este ejemplo, se establecen dos sombras, una con valores horizontales y verticales positivos y otra con valores negativos.

Curso de HTML Desde Cero

Inscríbete Ahora