Con gli stili CSS si può facilmente aggiungere un po’ di creatività e simulare i classici capilettera dei libri stampati. I capilettera sono la prima lettera iniziale di un paragrafo o capitolo che viene scritta in modo più grande rispetto alle altre lettere che seguono. Grazie agli pesudo-elementi del CSS, che in poche parole si possono definire “elementi fittizi che sono presenti nel CSS ma non nel codice della pagina”, si può facilmente ottenere l’effetto capolettera.
Il selettore pricipale per ottenere questo effetto è :first-letter. Con questo selettore è possibile indicare uno stile specifico solo per la prima lettera al quale aggiungere poi molte caratteristiche accessorie come la dimensione, il tipo di font, il colore, il padding e così via.
p:first-child:first-letter{
font-size: 32px;
font-weight: 900;
color: SlateGray;
}
In questo esempio viene specificato che solo la prima lettera del primo paragrafo :first-child :first-letter avrà una dimensione di 32px, sarà rappresentata in bold e in colore grigio.
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
Non c’è molto altro da aggiungere, questo comando è molto lineare nel suo utilizzo. Si possono aggiungere altre linee di codice per impostare la linea di base del capolettera di una o più righe sotto la linea di base della prima riga del paragrafo, aggiungere margini, rientri a destra o sinistra fino a colori di sfondo a contrasto. A questo punto serve solo un po’ di fantasia.