Cómo crear letras capitales con CSS

En este tip les mostraré como crear letras capitales utilizando CSS. De modo que en cada párrafo que insertes, si tiene una clase especifica de CSS, la primera letra del párrafo salga resaltada.

Método con un span especifico

El primer método que utilizaremos será usando una clase normal:

Código :

.capitalLetter
{
   float:left;
   color:black;
   background:white;
   border:1px solid #999999;
   font-size:80px;
   line-height:60px;
   padding:2px;
   font-family:times;
   margin-right: 5px;
}

Aplicamos el estilo de esta forma:

Código :

<span class="capitalLetter">L</span>orem ipsum dolor sit amet...

Con esto obtenemos una letra capital como esta:

Método con first-letter

Luce bien, pero tal vez necesitemos utilizar una en cada párrafo y colocarlas de una por una sería tedioso, para esto, usaremos el pseudo-elemento: first-letter.

Código :

p.capitalLetter:first-letter
{
   float:left;
   color:black;
   background:white;
   border:1px solid #999999;
   font-size:80px;
   line-height:60px;
   padding:2px;
   font-family:times;
   margin-right: 5px;   
}

Aplicamos asi:

Código :

<p class="cl">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Obteniendo el mismo resultado a la vista, dependiendo el uso, será como lo aplicaremos.

Recuerda que puedes experimentar para lograr diferentes y vistosos resultados.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.