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'

Similari
25 Tricks in CSS da conoscere
29% Css
Here are 25 incredibly useful CSS tricks that will help you design great web interfaces. You might be aware of some or all of these techniques, but this can be your handy resource to nifty CSS tricks that you should know. …
Alcune Web Font tipo Handwritten da Google
17% Stile
Un buon script per le font è difficile da trovare. Se siamo esigenti quando si tratta di questa particolare area di caratteri tipografici si tende ad odiare la maggior parte di ciò che si vede. Con questo post, è possibile…
Regole fastidiose ai web designer
16% Css3
Per la maggior parte dei webdesigner, lo stile di un sito web con i CSS è abbastanza semplice. Fintanto che il codice HTML è semantico e i div e le classi sono progettati in modo sensibile, il processo di sviluppo dovrebbe…
Mostrare avvisi ed errori con jQuery UI
14% UI
Esiste una libreria molto interessate se si usa jQuery ch’è jQuery UI. L’insieme di queste librerie sono molto utili e facilitano il lavoro con l’HTML nella pagina web. Nel caso di jQuery UI, ci sono un buon numero di cont…
Ciclare un elenco
13% JQuery
Questo codice scorre una lista non ordinata con un ID di nome ‘bicycle’ in un box animato in una posizione specifica. Può essere usato su qualsiasi elemento con figli. Sostituire “ul#bicycle li” con gli elementi che si des…