Cuando nos referimos a una letra capital hablamos del estilo que se le da a la primera letra de un párrafo. Mediante el lenguaje de hojas de estilo CSS podemos darle un formato a dicha letra, para que resalte del resto del contenido.
Lo que CSS nos ofrece es un pseudo-elemento para poder ser aplicado tanto a clases como a selectores. El pseudo-elemento en concreto que nos ofrece para gestionar la letra capital es first-letter.
De esta manera, el uso de la clase con el pseudo-elemento first-letter quedará de la siguiente forma.
.parrafo:first-letter {
/* definición CSS */
}
Podremos aprovecharnos de todos los atributos de CSS para formatear la letra capital. Es decir, puedes aplicar todo lo que hemos explicado dentro de los ejemplos de CSS. Por ejemplo podemos hacerla más grande mediante font-size, o cambiar el color con color, o bien modificar su alineación mediante float,…
Así, nuestro código, para dar el formato a una letra capital, nos podría quedar de la siguiente forma, en la cual ponemos su tamaño al doble, lo alineamos a la izquierda y hacemos que el color de la letra sea rojo.
.parrafo:first-letter{
font-size:200%;
float:left;
color:#f00;
}
Ahora que ya tenemos definido el código en CSS, solo nos quedará aplicar la clase que acabamos de definir sobre nuestro texto en HTML. Para aplicar la clase sobre algunos de los elementos HTML utilizaremos el atributo class. Este atributo lo vamos a asignar a un párrafo que hemos definido mediante un elemento p.
<p class="parrafo">Este es nuestro párrafo, el cual tendrá su primera letra como una letra capital</p>
Un código muy sencillo, pero a la vez muy útil para poder dar forma a las primeras letras de nuestros párrafos.
