Si quieres dar un aspecto más editorial, elegante o llamativo a tus textos, CSS te permite cambiar el estilo de la primera letra de un párrafo utilizando el pseudoelemento ::first-letter.
Esta técnica es especialmente útil para crear una letra capitular, ese recurso visual tan habitual en libros, periódicos, revistas y determinados diseños web.
La gran ventaja es que puedes modificar la primera letra sin añadir etiquetas HTML adicionales, manteniendo tu código mucho más limpio.
En este tutorial vas a aprender cómo utilizar ::first-letter, qué propiedades puedes modificar y cómo aplicarlo correctamente en tu página web.
🔤 Qué es ::first-letter en CSS
El pseudoelemento CSS ::first-letter permite seleccionar exclusivamente la primera letra de la primera línea de determinados elementos de texto.
Puedes consultar también la documentación de MDN sobre ::first-letter si quieres profundizar en su funcionamiento técnico.
Su utilización resulta especialmente interesante cuando quieres destacar visualmente el comienzo de un párrafo sin modificar directamente el contenido HTML.
Por ejemplo, imagina que tienes el siguiente código HTML.
<p>Este es un texto de ejemplo para nuestra página web.</p>
Puedes cambiar únicamente el aspecto de la letra E utilizando este sencillo código CSS.
p::first-letter {
font-size: 40px;
}
De esta forma, la primera letra del párrafo tendrá 40 píxeles, mientras que el resto conservará su tamaño original.
🎨 Cómo cambiar el estilo de la primera letra con ::first-letter
Utilizar este pseudoelemento es bastante sencillo y solamente necesitas identificar el selector CSS del elemento sobre el que quieres trabajar.
Sigue estos pasos para aplicarlo correctamente:
- 🔎 Identifica el elemento que contiene el texto cuya primera letra quieres modificar.
- ✏️ Añade
::first-letterinmediatamente después del selector CSS correspondiente. - 🎨 Introduce dentro de las llaves las propiedades CSS que quieras aplicar.
- 💾 Guarda los cambios realizados en tu hoja de estilos o en el apartado de CSS adicional de tu página web.
- 🔄 Actualiza la página y comprueba que la primera letra aparece con el nuevo diseño.
Un ejemplo básico podría ser el siguiente.
p::first-letter {
font-size: 45px;
font-weight: bold;
color: #333;
}
Con este código conseguirás que la primera letra sea más grande, tenga mayor grosor y utilice otro color.
📚 Cómo crear una letra capitular con CSS
Una de las aplicaciones más interesantes de ::first-letter consiste en crear una letra capitular similar a las utilizadas en revistas y libros.
Para conseguirlo puedes utilizar un código como este.
p::first-letter {
font-size: 60px;
font-weight: bold;
float: left;
line-height: 0.8;
margin-right: 8px;
}
La propiedad float: left permite que el resto del texto fluya alrededor de la letra, creando el característico efecto editorial.
El valor de line-height ayuda a controlar la posición vertical de la letra capitular respecto al resto del párrafo.
Finalmente, margin-right añade una pequeña separación para evitar que el texto quede demasiado pegado a la letra inicial.
🌈 Cómo cambiar el color de la primera letra
También puedes utilizar ::first-letter simplemente para cambiar el color de la primera letra del contenido.
El código sería tan sencillo como este.
p::first-letter {
color: red;
}
Puedes sustituir red por cualquier color CSS, código hexadecimal, valor RGB, HSL o variable personalizada de tu diseño.
Por ejemplo, utilizando hexadecimal podrías escribir lo siguiente.
p::first-letter {
color: #e63946;
}
Si quieres conocer las diferentes formas de definir colores puedes consultar la documentación sobre colores CSS de MDN.
🔠 Cómo cambiar la fuente de la primera letra
Otra opción interesante consiste en utilizar una familia tipográfica diferente exclusivamente para la primera letra del párrafo.
Puedes hacerlo mediante la propiedad font-family.
p::first-letter {
font-family: Georgia, serif;
font-size: 45px;
}
Este recurso puede ayudarte a crear un contraste tipográfico especialmente interesante en páginas editoriales, blogs o diseños con una estética clásica.
También puedes combinar esta propiedad con font-weight, font-style o font-size para personalizar todavía más el resultado.
✨ Añadir efectos a la primera letra
Aunque ::first-letter tiene algunas limitaciones respecto a las propiedades CSS que admite, puedes combinar diferentes estilos para conseguir un resultado mucho más llamativo.
Por ejemplo, puedes añadir una sombra utilizando text-shadow.
p::first-letter {
font-size: 50px;
font-weight: bold;
color: #222;
text-shadow: 2px 2px 3px #aaa;
}
Este tipo de efecto puede resultar interesante en determinados diseños, aunque conviene utilizarlo con moderación para mantener una buena legibilidad.
🎯 Aplicar ::first-letter únicamente a determinados párrafos
Probablemente no quieras cambiar la primera letra de todos los párrafos de tu página web.
En ese caso puedes utilizar una clase CSS específica.
Por ejemplo, añade una clase al párrafo que quieres modificar.
<p class="letra-capitular">
Este párrafo tendrá una primera letra diferente.
</p>
Después puedes aplicar el pseudoelemento exclusivamente a esa clase.
.letra-capitular::first-letter {
font-size: 55px;
font-weight: bold;
color: #555;
}
De esta manera tendrás un control mucho mayor sobre los textos que reciben este estilo.
📝 Aplicar ::first-letter a los artículos de WordPress
Si utilizas WordPress también puedes aprovechar este pseudoelemento para modificar la primera letra de los párrafos de tus entradas.
Dependiendo del tema utilizado, puedes emplear un selector similar al siguiente.
.entry-content p::first-letter {
font-size: 42px;
font-weight: bold;
}
Ten en cuenta que el selector .entry-content puede cambiar dependiendo del tema de WordPress que estés utilizando.
Puedes introducir este código desde las opciones de personalización de tu tema, mediante un tema hijo o utilizando el sistema de estilos que proporcione tu constructor visual.
⚠️ Cuidado al aplicar ::first-letter a todos los párrafos
Aplicar ::first-letter directamente sobre p afectará automáticamente a todos los párrafos que coincidan con ese selector.
Esto puede generar resultados extraños en textos muy cortos, avisos, formularios, pies de página o determinadas zonas de tu diseño.
Por este motivo suele ser recomendable utilizar una clase específica o un selector más concreto.
Por ejemplo, puedes limitar el efecto únicamente al primer párrafo de un artículo.
.entry-content p:first-of-type::first-letter {
font-size: 60px;
font-weight: bold;
float: left;
margin-right: 8px;
}
Esta combinación resulta especialmente útil cuando quieres crear una letra capitular únicamente al comienzo de cada artículo.
📊 Tabla resumen de propiedades para ::first-letter
| Propiedad CSS | Función | Ejemplo |
|---|---|---|
font-size | Cambia el tamaño de la primera letra | font-size: 50px; |
font-weight | Modifica el grosor | font-weight: bold; |
font-family | Cambia la tipografía | font-family: Georgia; |
color | Modifica el color | color: #333; |
font-style | Permite utilizar cursiva | font-style: italic; |
float | Facilita crear letras capitulares | float: left; |
margin | Añade separación alrededor de la letra | margin-right: 8px; |
line-height | Ajusta la altura de línea | line-height: 0.8; |
text-shadow | Añade una sombra al carácter | text-shadow: 2px 2px 3px #aaa; |
💡 Ejemplo completo de ::first-letter
Si quieres conseguir una letra inicial grande y elegante, puedes partir del siguiente código.
.letra-capitular::first-letter {
font-family: Georgia, serif;
font-size: 64px;
font-weight: bold;
line-height: 0.8;
float: left;
margin-right: 10px;
margin-top: 6px;
color: #333;
}
Solo tendrás que aplicar la clase letra-capitular al párrafo correspondiente para obtener el efecto.
Puedes encontrar otras posibilidades relacionadas con pseudoelementos en la guía de pseudoelementos CSS de MDN.
🚀 Ventajas de utilizar ::first-letter
Utilizar ::first-letter te permite mejorar el diseño de tus textos mediante unas pocas líneas de CSS y sin introducir elementos innecesarios en el HTML.
Además, podrás modificar fácilmente el estilo desde una única hoja CSS y mantener una apariencia consistente en todas las páginas de tu sitio.
Es una técnica especialmente recomendable para blogs, revistas digitales, webs literarias y páginas que quieran transmitir una estética editorial más cuidada.
✅ Conclusión
El pseudoelemento ::first-letter es una herramienta CSS sencilla pero muy útil para personalizar la primera letra de tus textos.
Puedes utilizarlo para cambiar su tamaño, color, tipografía o grosor, así como para crear una letra capitular profesional sin necesidad de modificar manualmente cada párrafo.
Si además combinas ::first-letter con selectores como :first-of-type, podrás controlar exactamente dónde aparece el efecto y evitar que se aplique a textos que no lo necesitan.
Con unas pocas líneas de código puedes conseguir que el comienzo de tus artículos tenga un aspecto más atractivo, editorial y distintivo.
