CSS - Texto

¿Qué es CSS Text?

CSS Text se refiere al estilo y formato del contenido de texto en páginas web utilizando Hojas de Estilo en Cascada (CSS). Implica un conjunto de propiedades CSS que permiten a los desarrolladores web controlar varios aspectos de la presentación del texto, como el color, la alineación y el espaciado. Con CSS Text, puedes hacer que tu texto sea visualmente atractivo y legible en diferentes dispositivos y navegadores.

CSS Text es una parte importante del diseño web porque afecta la experiencia del usuario y la legibilidad de tu sitio web. Al seleccionar colores de texto, alinear párrafos, ajustar el espaciado entre letras y palabras, y aplicar otras técnicas de estilo de texto, puedes crear una apariencia profesional para tu contenido de texto. Un texto bien estilizado mejora el aspecto general de tu sitio web.

CSS Text también juega un papel en la tipografía. Con las propiedades de CSS Text, puedes elegir fuentes, establecer tamaños de fuente y controlar las alturas de línea para mejorar la legibilidad de tu texto. Esto es importante para pasajes más largos como artículos o publicaciones de blog donde el formato adecuado mejora la experiencia de lectura del usuario.

En las siguientes secciones, cubriremos varias propiedades y técnicas de CSS Text que te ayudarán a dar estilo a tu texto. Desde establecer colores hasta alinear texto horizontal y verticalmente, aplicar decoraciones, transformaciones y sombras, aprenderás cómo crear contenido visualmente atractivo para tus páginas web.

<p>This    is   a   paragraph   with    extra   spaces.</p>

This is a paragraph with extra spaces.

<p>This is a paragraph.</div>

<p>This is a paragraph.</p>

Configuración del color del texto

En CSS, puedes establecer el color del texto usando la propiedad color. Hay varias formas de especificar el color deseado:

1. Usando nombres de colores: CSS proporciona un conjunto de nombres de colores predefinidos que puedes usar para establecer el color del texto. Por ejemplo, puedes usar color: red; para establecer el color del texto en rojo. Otros nombres de colores comunes incluyen blue, green, yellow, purple y black. Sin embargo, la lista de nombres de colores es limitada.

2. Usando valores hexadecimales: Los valores hexadecimales son una forma popular de representar colores en CSS. Comienzan con un símbolo de numeral (#) seguido de seis dígitos hexadecimales (0-9 y A-F). Cada par de dígitos representa la intensidad de rojo, verde y azul (RGB) respectivamente. Por ejemplo, color: #FF0000; establece el color del texto en rojo brillante.

3. Usando valores RGB: RGB significa Rojo, Verde, Azul, y representa los colores especificando la intensidad de cada componente. En CSS, puedes usar la función rgb() para establecer colores usando valores RGB. Por ejemplo, color: rgb(255, 0, 0); establece el color del texto en rojo.

4. Usando valores HSL: HSL significa Tono, Saturación y Luminosidad. Es otra forma de representar colores en CSS. La función hsl() te permite especificar colores usando valores HSL. El tono representa la rueda de color y va de 0 a 360 grados, mientras que la saturación y la luminosidad se representan como porcentajes.

<p style="color: blue;">Este texto es azul usando un nombre de color.</p>
<p style="color: #00FF00;">Este texto es verde usando un valor hexadecimal.</p>
<p style="color: rgb(255, 0, 255);">Este texto es magenta usando valores RGB.</p>
<p style="color: hsl(60, 100%, 50%);">Este texto es amarillo usando valores HSL.</p>

El uso de diferentes formatos de valores con la propiedad 'color' en las hojas de estilo de los elementos de tu página web o en hojas de estilo en línea como en los ejemplos anteriores ayudará a lograr los resultados deseados.

Alineación horizontal del texto

CSS proporciona propiedades para alinear el texto horizontalmente dentro de un elemento. La propiedad más utilizada es text-align, que permite establecer la alineación del texto. Estos son los diferentes valores que puedes usar con text-align:

1. Alineación a la izquierda: Por defecto, el texto se alinea al lado izquierdo de su contenedor. Puedes establecer explícitamente la alineación a la izquierda usando:

   text-align: left;

Esto asegura que el texto comience desde el borde izquierdo del elemento y continúe hacia la derecha.

2. Alineación central: Para centrar el texto dentro de su contenedor, puedes usar:

   text-align: center;

Esto centrará horizontalmente el texto, haciendo que esté espaciado de manera uniforme desde los bordes izquierdo y derecho del elemento.

3. Alineación a la derecha: Para alinear el texto al lado derecho de su contenedor, puedes usar:

   text-align: right;

Esto asegurará que el texto comience desde el borde derecho del elemento y continúe hacia la izquierda.

Subrayar Texto

Un uso común de la decoración de texto es subrayar. Por defecto, los enlaces en HTML están subrayados para indicar que se pueden hacer clic. Sin embargo, también puedes subrayar texto normal usando la propiedad text-decoration:

p {
  text-decoration: underline;
}

Esto añadirá un subrayado a todos los párrafos en tu página web.

Si quieres eliminar el subrayado predeterminado de los enlaces, puedes usar el siguiente CSS:

a {
  text-decoration: none;
}

Esto eliminará el subrayado de todos los enlaces, dándote más control sobre su apariencia.

Línea Superior y Tachado

Además de subrayados, también puedes añadir líneas superiores y tachados a tu texto usando la propiedad text-decoration.

Para añadir una línea superior a tu texto, puedes usar:

h1 {
  text-decoration: overline;
}

Esto dibujará una línea sobre el texto de todos los elementos <h1>.

Para tachar texto, puedes usar:

span {
  text-decoration: line-through;
}

Esto dibujará una línea a través del medio del texto dentro de los elementos <span>.

También puedes combinar múltiples decoraciones separándolas con espacios:

p {
  text-decoration: underline overline;
}

Esto añadirá tanto un subrayado como una línea superior a los párrafos.

Usa las decoraciones con propósito para transmitir significado o llamar la atención sin saturar tu contenido.

Mayúsculas y Minúsculas

Para convertir texto a mayúsculas, puedes usar el siguiente CSS:

h1 {
  text-transform: uppercase;
}

Esto transformará todo el texto dentro de los elementos <h1> a mayúsculas, sin importar cómo esté escrito originalmente en el HTML.

De manera similar, puedes convertir texto a minúsculas usando:

p {
  text-transform: lowercase;
}

Esto transformará todo el texto dentro de los elementos <p> a minúsculas.

Capitalización de Palabras

Si quieres capitalizar la primera letra de cada palabra en un texto, puedes usar el valor capitalize para la propiedad text-transform:

h2 {
  text-transform: capitalize;
}

Esto capitalizará la primera letra de cada palabra dentro de los elementos <h2>, dejando las otras letras en su caso original.

Ejemplo de Diferentes Transformaciones de Texto

<h1>esto es un encabezado</h1>
<p>Esto Es Un Párrafo.</p>
<h2>otro encabezado va aquí</h2>

h1 {
  text-transform: uppercase;
}

p {
  text-transform: lowercase;
}

h2 {
  text-transform: capitalize;
}

• El elemento <h1> se mostrará como "ESTO ES UN ENCABEZADO" (todo en mayúsculas).
• El elemento <p> se mostrará como "esto es un párrafo." (todo en minúsculas).
• El elemento <h2> se mostrará como "Otro Encabezado Va Aquí" (primera letra de cada palabra en mayúscula).

La transformación de texto ayuda a mantener un estilo de capitalización consistente en ciertos elementos o secciones de tu página web.

Espaciado entre letras

La propiedad letter-spacing en CSS permite ajustar el espacio entre caracteres individuales en un texto. Por defecto, el navegador establece el espaciado entre letras según la fuente utilizada. Sin embargo, puede anular este espaciado para crear el efecto deseado.

Para aumentar o disminuir el espaciado entre letras, puede usar un valor de longitud positivo o negativo:

p {
  letter-spacing: 2px;
}

Esto agregará 2 píxeles de espacio entre cada carácter en todos los elementos <p>. Los valores negativos acercarán los caracteres entre sí.

Espaciado entre palabras

También puede controlar el espacio entre palabras usando la propiedad word-spacing. Esta propiedad acepta un valor de longitud que representa el espacio adicional añadido entre palabras.

h2 {
  word-spacing: 1em;
}

Se añade un espacio adicional de 1em (relativo al tamaño de la fuente) entre cada palabra dentro de los elementos <h2>.

Altura de línea

La propiedad line-height establece la altura de cada línea de texto. Determina el espaciado vertical entre líneas. Puede especificar la altura de línea usando valores de longitud, porcentajes o números sin unidades.

p {
  line-height: 1.5;
}

Los párrafos tienen una altura de línea establecida en 1.5 veces su tamaño de fuente. Si el tamaño de la fuente es 16px, entonces la altura de línea será 24px (16px * 1.5). Ajustar la altura de línea mejora la legibilidad al evitar que las líneas estén demasiado juntas o demasiado separadas.

Sangría

La sangría se refiere al espacio al comienzo de una línea de texto. En CSS, puede aplicar sangría a la primera línea de un párrafo usando la propiedad text-indent, que acepta un valor de longitud que especifica la cantidad de sangría:

p {
  text-indent: 20px;
}

Esta regla aplica una sangría de 20 píxeles a la primera línea de cada párrafo.

Añadir Sombra al Texto

Para añadir una sombra al texto, utiliza la propiedad text-shadow seguida de un conjunto de valores:

h1 {
  text-shadow: 2px 2px 4px #000000;
}

El elemento <h1> tendrá una sombra con estas propiedades:

• El primer valor (2px) especifica el desplazamiento horizontal de la sombra. Un valor positivo mueve la sombra hacia la derecha; un valor negativo la mueve hacia la izquierda.
• El segundo valor (2px) especifica el desplazamiento vertical de la sombra. Un valor positivo mueve la sombra hacia abajo; un valor negativo la mueve hacia arriba.
• El tercer valor (4px) establece el radio de desenfoque de la sombra. Un valor mayor resulta en una sombra más borrosa y suave.
• El cuarto valor (#000000) define el color de la sombra.

Puedes ajustar estos valores para obtener diferentes efectos:

p {
  text-shadow: -1px -1px 2px #FF0000;
}

Esto creará una sombra roja desplazada 1 píxel hacia arriba y hacia la izquierda, con un radio de desenfoque de 2 píxeles.

También puedes aplicar múltiples sombras a un mismo texto separando cada definición con una coma:

h2 {
  text-shadow: 1px 1px 2px #000000, 0 0 10px #0000FF;
}

El elemento <h2> tiene dos sombras:

• La primera es negra, desplazada un píxel hacia abajo y hacia la derecha, con un radio de desenfoque de dos píxeles.
• La segunda es azul sin desplazamiento y tiene un radio de desenfoque de diez píxeles.

Combinando diferentes valores y colores, puedes crear sombras atractivas para tu contenido de texto.