Tutorial CSS : Styler une citation

La balise <blockquote>

Vous connaissez probablement la balise <blockquote>, qui permet d'insérer dans votre page une longue citation. C'est un élément de type 'block' (il y a un retour à la ligne avant et après le contenu de la balise). Rappelons au passage que la balise <cite> représente la source de la citation, et que son attribut 'cite' contient la référence médiamétrique de la citation.

Par exemple :

<p><cite>Albert Einstein</cite> disait :</p>
<blockquote>Quiconque prétend s'ériger en juge de la vérité et du savoir s'expose à périr sous les éclats de rire des dieux puisque nous ignorons comment sont réellement les choses et que nous n'en connaissons que la représentation que nous en faisons.</blockquote>

Rendu par défaut

Le rendu par défaut est le suivant :

Application des styles CSS

Vous le voyez, les navigateurs n'appliquent aucun style au bloc de citation, si ce n'est une marge. Mais vous pouvez en CSS rendre cette citation attrayante. Nous allons l'entourer par deux gros guillemets (deux images) et ajouter une emphase sur la première lettre :

blockquote {
    font-family:Georgia,"Times New Roman",Times,serif;
    font-style:italic;
    background:url(right-quote.gif) no-repeat right bottom;
    text-indent:-25px;
    padding-right:25px;
    padding-left:25px;
    color:brown;
    text-align:justify;
}

blockquote:first-letter {
    background:url(left-quote.gif) no-repeat left top;
    padding-left:25px;
    font-size:1.4em;
}

Rendu obtenu

Ressources

• Voir la démo du tutorial
• Télécharger le .zip