Sommaire

Les blocs de citation

L’élément <blockquote> permet de créer des blocs de citation avec une mise en forme particulière, avec en plus l’utilisation de l’élément <cite> pour indiquer la source de la citation.

Voici un exemple tout simple d’un bloc de citation :

<blockquote>C’est le rôle essentiel du professeur d’éveiller la joie de travailler et de connaître. 
 <cite>Albert Einstein</cite> 
</blockquote>

Voici son rendu :

images/C07-002.png

Il s’agit d’un texte de couleur grise, avec une bordure grise à gauche, des remplissages et des marges.

Voici les règles CSS qui gèrent cette mise en forme :

blockquote { 
  margin: 0 0 1rem; 
  padding: 0.5625rem 1.25rem 0 1.1875rem; 
  border-left: 1px solid #cacaca; 
} 
blockquote, blockquote p { 
  line-height: 1.6; 
  color: #8a8a8a; 
}

Pour l’élément <cite>, voilà les deux règles CSS utilisées :

cite { 
  display: block; 
  font-size: 0.8125rem; 
  color: #8a8a8a; 
} 
cite:before { 
  content: ’\2014 \0020’; 
}