Scopriamo come può utilizzare i CSS per visualizzare la prima lettera di una notizia con una dimensione superiore al resto del testo, come in alcuni quotidiani o blogs.

Due approcci possibili

⤽
Vecchio stile
⤽
Si può sempre fare con un selettore CSS e si dovrebbe utilizzare un tag <span> sulla prima lettera; questo diventa non solo ostrusivo ma anche laborioso se non si dispone di un artifizio per modificare il DOM.
<p><span>L</span>orem ipsum dolor sit amet, consectetur adipiscing ù elit. Ut in metus nec mauris egestas … amet ultricies viverra, mollis at quam.</p>
Poi si dovrebbe aggiungere uno stile al tag <span> per creare il carattere in maiuscolo.
p {
    font-family:verdana;
    font-size: .75em;
    color: #00F;
}
p span {
    display:block;
    float:left;
    font-family:Georgia;
    font-size: 300%;
    font-weight: bold;
    line-height: 90%;
    margin-right: 6px;
    margin-bottom:-2px;
    margin-top: 7px;
    color: #F00;
}
Aprite la demo per vedere come viene lo stile del paragrafo dal pulsante 'Result'.
Il suo sorgente si può vedere da 'HTML' e 'CSS'

Il problema di questa tecnica è che bisogna ricordarsi sempre di aggiungere uno <span> intorno al punto ogni volta che si desidera creare un carattere in maiuscolo speciale; in un sistema CMS l’utente potrebbe non capire l’HTML e allora non sarà in grado di aggiungere il tag <span> all’inizio del paragrafo.

Il modo per aggirare questo è quello di utilizzare una nuova proprietà CSS3 :first-letter.

CSS First Letter
⤽
CSS3 ci da la possibilità di aggiungere la proprietà :first-letter che, come si può intuire permette di dare uno stile alla prima lettera dell’elemento.

Quindi si può aggiungere questa regola per creare un carattere speciale su tutti i paragrafi.

>
p:first-letter {
	display:block;
	float:left;
	font-family:Georgia;
	font-size: 310%;
	font-weight: bold;
	line-height: 90%;
	margin-right: 6px;
	margin-bottom:-2px;
	margin-top: 7px;
}
Aprite la demo per vedere come viene lo stile del paragrafo dal pulsante 'Result'.
Il suo sorgente si può vedere da 'HTML' e 'CSS'