Artículos
CSS

Letra capital

19/Ene/2007

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.

Código Fuente

Descárgate el código fuente de Letra capital
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Test CSS

¿Te atreves a probar tus habilidades y conocimiento en CSS con nuestro test?

Test CSS
Suscribir
Notificar de
guest
69 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios