Capitalizar o destacar la primera letra

Tiempo estimado de lectura: 3 minutos

 

Cómo capitalizar la primera letra de un texto

Hoy vamos a ver cómo podemos capitalizar o destacar la primera letra de un párrafo usando un código de CSS muy sencillo.

Seguramente has visto este efecto en innumerables ocasiones, o incluso lo has hecho alguna vez cuando maquetas textos con Microsoft Word. Pues en esta ocasión vamos a aprender a hacerlo utilizando un poquito de código.

¡Vamos allá!

Código para destacar la primera letra del texto

Como te he comentado, utilizaremos un código muy sencillo, tan solo tenemos que utilizar la pseudoclase ::first-letter y aplicársela a nuestros párrafos, pero no adelantemos acontecimientos… primero vamos con el código.

p:first-child::first-letter {
font-size: 30px;
font-weight: bold;
font-family: "Arial Black";
}

Ya ves que pequeño es el código, y su explicación también es cortita.

Lo primero que tenemos que saber es lo que hace la pseudoclase :firstchild, pues bien, lo que hace es seleccionar al primer elemento dentro de otro elemento, por lo que seleccionará la primera letra de la primera palabra del párrafo.

A continuación, ::firstletter aplicará estilos a la primera letra dentro de la primera línea de un elemento de bloque, en este caso un párrafo.

Combinadas estas dos pseudoclases conseguimos que a la primera letra de la primera línea del texto, se le aplique un código CSS que en este caso convertirá dicha letra en una fuente Arial Black, negrita (bold) y con un tamaño de 30px.

Si quieres modificar este texto, puedes cambiar el tipo de letra, el tamaño o el grosor (el peso de la tipografía). Lo único que te aconsejo es que utilices una tipografía gruesa para destacar esa primer letra, pero esto lo dejo a tu gusto 🙂

Y como siempre, ¿dónde colocamos este texto?

Como es un código CSS muy sencillo, puedes pegarlo directamente en el personalizador de tu tema. para ello debes ir al menú Apariencia, Personalizar, CSS adicional y pegarlo ahí dentro.

Sencillo, ¿verdad?, pues el resultado sería algo como esto:

Capitalizar o destacar la primera letra de un texto
Capitalizar o destacar la primera letra de un texto

¿Te ha servido este artículo?, DALE CARIÑO. 0


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja una respuesta

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros, salvo por imperativo legal.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *