Style lettrine

Il peut être intéressant d'avoir une lettrine sur vos paragraphes suivant le look de votre site, cela peut ce faire facilement grâce à la pseudo class :first-letter (à noter que les anciens navigateurs ne gère pas forcement cette pseudo class)

Considérons que vous avez un paragraphe basique :

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut ut justo justo, vitae sodales mi. Pellentesque sollicitudin mollis
est, vel suscipit lacus viverra non. Fusce interdum tincidunt odio,
non fermentum purus adipiscing non.</p>

dans votre feuille de style on y assigne un style simple :

p {
    padding:5px;
    line-height:20px;
    text-align:justify;
}

c'est à dire une marge interne de 5 pixels, une hauteur de ligne de 20 pixels et on justifie le texte, ensuite on utilise la pseudo class :first-letter pour ajouter un style différent à la première lettre du paragraphe, on ajoute donc ceci :

p:first-letter {
    font-size:300%;
    float:left;
    padding:4px;
    text-transform: uppercase;  
    line-height:30px;
}

soit une taille de 300% pour la lettrine, flottant à gauche, avec une marge interne de 4 pixels, une mise en majuscule au cas ou on l'aurait oublié lors de la saisie du texte et une hauteur de ligne de 30 pixels, pour avoir un rendu quasi identique dans la plupart des navigateur, ce qui nous donne ceci :