Zitate, Hinweisboxen und andere besondere Textauszeichnungen sind allesamt Teil des Fließtextes. Um die Aufmerksamkeit des Lesers zu erregen, sollte man diese optisch hervorheben. Mit CSS kein Problem.

Zitate mit blockquote und cite

Zitate, die in einem eigenen Absatz stehen, werden mit den Elementen blockquote und cite gekennzeichnet:

<p>Der folgende Absatz ist ein Block-Zitat mit Quellenangabe:</p>
<blockquote>
<p>Sie können Zitate von Fremdautoren in einem eigenen, anders formatierten (zumeist eingerückten) Absatz hervorheben.</p> 
<p>Es handelt sich dabei jedoch um eine logische, inhaltliche Auszeichnung. Wie diese Absätze genau formatiert werden, bestimmt letztlich der Webbrowser. Die Vorgabe ist jedoch, solche Absätze auffällig und vom übrigen Text unterscheidbar anzuzeigen. 
<cite>(Quelle: <a href="http://de.selfhtml.org/html/text/zitate_adressen.htm"> SelfHTML</a>)</cite></p>
</blockquote>

Dieses Zitat ist mit den Styles zur Schriftgestaltung (aus dem Beitrag "Fließtext gestalten per CSS") zwar bereits gut lesbar, wirkt aber noch nicht so richtig ansprechend:

Ein Blockzitat mit Schriftgestaltung

Dieses Zitat wird im Folgenden mit ganz normalen Box-Modell-Eigenschaften wie background und padding etwas ansprechender gestaltet. Anschließend wird die mit cite markierte Zitatquelle zur Block-Box gemacht und der Text darin rechts ausgerichtet.

Öffnen Sie die Datei blockquote.html aus dem Basisordner der Beispieldateien und ergänzen Sie den Style-Block im head der Seite um folgende CSS-Regel:

/* ==============================================
   Gestaltung von blockquote
   ============================================== */
blockquote { 
   background: #fff9df; 
   padding: 1em 1em 0 1em; 
   border-top: 3px solid #f3c600; 
   border-bottom: 3px solid #f3c600;  
   margin-left: 0; /* keine Zentrierung */ 
}

Fügen Sie direkt darunter den folgenden Style zur Gestaltung von cite ein: