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.
[code lang=”html”] <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>
[/code]
Poi si dovrebbe aggiungere uno stile al tag <span> per creare il carattere in maiuscolo.
[code lang=”css”] 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;
}
[/code]
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.

[code lang=”css”]>
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;
}
[/code]
Aprite la demo per vedere come viene lo stile del paragrafo dal pulsante 'Result'.
Il suo sorgente si può vedere da 'HTML' e 'CSS'