Cómo aplicar diferentes estilos CSS a letras y palabras de la misma frase en una página web

Técnica para asignar diferentes estilos CSS en el texto de la misma frase

Ernesto BarrachinaApariencia WebDeja tu comentario

Por motivos estéticos o como parte de nuestra estrategia SEO, a veces necesitamos aplicar diferentes estilos CSS en el texto de la misma frase.

Ya sean letras sueltas, palabras o grupos de palabras, pintar partes de una frase en un color diferente o asignarle otro tamaño de letra es un recurso visual con resultados súper profesionales.

Suelo recurrir a esta técnica principalmente en los h1 de las páginas «home». Ya sabes que estos deben contener la palabra clave principal y, en teoría, ser el primer texto que se lea en la web. Aunque a veces conseguirlo no resulta tan fácil como parece.

Pues bien, con este método crearemos el efecto de tener varias frases, y lo haremos utilizando solo una oración a la que le aplicaremos estilos diferentes a sus letras o palabras.

Diferentes estilos CSS en el texto de la misma frase, ya sean palabras o letras

Realmente aplicamos estilos diferentes a palabras sin ser muy conscientes de ello. Por ejemplo, cuando asignamos negritas, cursivas o cambiamos de color una cadena de texto dentro de una oración.

Esto es lo mismo pero, en lugar de utilizar formatos predefinidos, lo que haremos es personalizar las letras y palabras de una frase según nuestras necesidades.

Distinto estilo en la primera letra: Letra Capital o «Dropcap»

Como verás en el siguiente ejemplo, para producir el efecto dropcap hay que introducir la letra que pretendemos modificar (en este caso la primera) dentro de una etiqueta <span>.

See the Pen
Dropcap Sencillo
by EBWEB (@Ebweb-es)
on CodePen.

Si quisiéramos que el efecto afectara a la palabra entera, solo habría que rodearla con la etiqueta <span> para que también se viera modificada por la regla:

<p><span>Lorem fistrum</span> no puedor mamaar a peich fistro tiene musho peligro tiene musho peligro a peich caballo blanco caballo negroorl se calle ustée</p>

En este mismo principio basaremos nuestra técnica para aplicar diferentes estilos a palabras de la misma frase de una página web.

Aplicar estilos diferentes en cada línea de una misma frase

En el ejemplo verás que el truco está en dividir la frase en varios bloques recurriendo a la etiqueta <span></span>, y asignarle a cada uno las propiedades que prefieras.

Una vez «despiezada» la frase, podremos manipular cada bloque de forma independiente en función de los conocimientos en CSS que tengamos.

Es importante que tengas en cuenta que, para que las distintas secciones de la frase hagan el salto de párrafo hay que aplicarles la propiedad display:block;, que hará que ocupe la línea completa, forzando a bajar al siguiente bloque o sección de texto.

See the Pen
vYxdeGv
by EBWEB (@Ebweb-es)
on CodePen.

Igual que en otras ocasiones, puedes utilizar la técnica para aplicar distintos estilos CSS dentro de una misma frase en cualquier tipo de página web.

Si te ha gustado comparte

Más sobre el autor

Ernesto Barrachina

Me dedico al diseño web Valencia y tengo pasión por las herramientas de diseño gráfico, así como por compartir tips de diseño web en forma de consejos y tutoriales "para todos los públicos".

¿Necesitas un Diseño Web Valencia?

Deja una respuesta

INFORMACIÓN BÁSICA SOBRE LA PROTECCIÓN DE TUS DATOS

Todos las datos marcados con asterisco (*) son obligatrorios. Si no los indicas no podrás comentar en el blog.

Responsable de la web: Ernesto Barrachina Rubio (EBWEB) Finalidad de los datos: Gestionar los comentarios que realizas en este blog. Legitimación: Consentimiento del interesado. Destinatarios: No se comunican los datos a nadie más. Plazo de conservación de los datos: Hasta que no se solicite su supresión por el interesado. Los datos que me facilitas estarán ubicados en los servidores de Dinahosting (mi proveedor de hosting) fuera de la UE en Otros. Dinahosting está ubicado en la UE, con los niveles de protección adecuados según Comisión de la UE. Ver política de privacidad de Dinahosting. Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en ebweb@ebweb.es así como el derecho a presentar una reclamación ante una autoridad de control. Puedes consultar la información adicional y detallada sobre Protección de Datos en mi página web: https://ebweb.es, así como consultar mi política de privacidad.

Tu comentario quedará pendiente de moderación. Vuelve en dos o tres días para ver la respuesta y tu comentario publicados.

Muchas gracias por comentar ☺