Original article: Span HTML – How to Use the Span Tag with CSS

Se puede usar la etiqueta HTML span como contenedor para agrupar elementos en la misma línea y así poder darles estilos o manipularlos con JavaScript.

En este artículo, Le mostraré como usar esta etiqueta para hacer que una cierta parte del contenido sea distinta del resto. Luego usted podrá comenzar a usarlo en sus proyectos de codificación.

¿Para qué se usa la etiqueta span?

Esta etiqueta se comporta igual que un div, el cual es usado para agrupar contenido similar, así puede darles estilos a todo junto.

Pero span se diferencia en que es un elemento en línea, en contraposición a div, que es un elemento de bloque.

Además, tenga en cuenta que span en sí misma no tiene ningún efecto en su contenido, a menos que tú le des estilos.

Hay dos usos principales de la etiqueta span: dar estilo y manipular un texto en particular con JavaScript.

Cómo dar estilos al texto con la etiqueta span

Si deseas que un texto en particular o algún otro contenido sea diferente del resto, puedes envolver este contenido en un span, darle un atributo de clase y entonces seleccionarlo con el valor del atributo para darle estilos.

En los siguientes ejemplos, se puede cambiar el color, background-color y font-style de algún texto encerrándolo en una etiqueta span.

Cómo cambiar el color del texto

<p>Este es un <span class="texto-carmesi">texto carmesí</span> dentro de otros.</p>

.texto-carmesi {
      color: crimson;
}

He añadido un poco de CSS básico para centrar todo en la página:

body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }
image-43
Texto con estilos dentro de una etiqueta span

Cómo cambiar el color del fondo

<p>
      Un <span class="fondo-verde">color de fondo verde</span> recuerda perfectamente la belleza de la naturaleza.
</p>

 .fondo-verde {
        background-color: #2ecc71;
      }
image-45
Color de fondo verde aplicado a un texto usando span

Cómo cambiar el estilo de la fuente

<p>
   Un estilo de fuente <span class="estilo-fuente">en cursiva</span> puede ser usado para dar énfasis a un texto.
</p>

.estilo-fuente {
     font-style: italic;
   }
image-50
Estilo de fuente cursiva

Cómo manipular la etiqueta span con JavaScript

Al igual que es posible dar estilo al contenido envolviéndolo en una etiqueta span, también puedes manipular su contenido de la misma manera. Debes darle un atributo id y seleccionarlo por su id con JavaScript de tal forma que pueda ser manipulado.

En el ejemplo siguiente, he cambiado un texto dentro de otro a mayúsculas con JavaScript:

<p>
   El texto <span id="mayusculas"> freecodecamp</span>, fue cambiado a mayúsculas con JavaScript
</p>
const mayusculas = document.querySelector("#mayusculas");

mayusculas.style.textTransform = "uppercase";
image-51
Texto cambiado a mayúsculas

Conclusión

En este tutorial, has aprendido cómo manipular una pieza particular de texto con CSS y JavaScript, envolviéndolo en una etiqueta span y dándole un atributo class o id único.

Debes notar que en casos como este, debes usar clases para el estilo e identificadores (id) para la manipulación con JavaScript con el objetivo de evitar confusiones.

Gracias por leer y sigue programando.