Los pseudo-elementos first-letter y first-line

El pseudo-elemento :first-letter permite establecer las propiedades de la primera letra de un párrafo. Es algo simple pero, debe tenerse muy en cuenta que ese párrafo debe comenzar con un texto y no funcionará si es precedido por una imagen, un salto de línea o cualquier otro tipo de contenido.

Un par de ejemplos:

Suspendisse lacinia erat ut ipsum tristique at pretium nunc bibendum! Mauris non neque a odio ultrices volutpat.

Suspendisse lacinia erat ut ipsum tristique at pretium nunc bibendum! Mauris non neque a odio ultrices volutpat.

.ejemplo-1:first-letter {
  color: aquamarine;
  font-family: Garamond;
  font-size: 50px;
  line-height: 0.5;
  vertical-align: baseline;
}

.ejemplo-2:first-letter {
  color: salmon;
  float: left;
  font-family: monospace;
  font-size: 117px;
  font-style: italic;
  padding-right: 10px;
  text-shadow: 2px 0 1px #FFF;
}

Hay que tener muy pero muy en cuenta que, como estamos trabajando con fuentes, los resultados podrán variar sustantivamente en los distintos navegadores así que hay que mirar bien y tratar de encontrar alguna clase de equilibrio.

El otro pseudo-elemento similar es :first-lineque hace algo similar pero se aplica a la primer línea de un párrafo.

En este caso, hay que tener en cuenta que la primera línea no se refiere a lo que se separa por saltos de línea sino a la primera línea que muestra el navegador así que en estos ejemplos, la regla de estilo tiene resultados distintos aún cuando el texto sea el mismo porque lo que varía es el ancho:

Mauris non neque a odio ultrices volutpat. Aliquam orci lectus; consequat at ultrices ac, luctus sed erat. Duis in pretium orci. Phasellus metus leo, hendrerit at volutpat.

Mauris non neque a odio ultrices volutpat. Aliquam orci lectus; consequat at ultrices ac, luctus sed erat. Duis in pretium orci. Phasellus metus leo, hendrerit at volutpat.

ejemplo3:first-line {
  color: red;
}
ejemplo4:first-line {
  color: yellowgreen;
  font-style: italic;
  font-variant: small-caps;
}

Como siempre, podemos combinar ambas cosas y, en ese caso, hay que saber que "quien mande" será :first-letter, sin importar el orden en que lo hayamos escrito:

Mauris non neque a odio ultrices volutpat. Aliquam orci lectus; consequat at ultrices ac, luctus sed erat. Duis in pretium orci. Phasellus metus leo, hendrerit at volutpat.