Veränderter erster Buchstabe: Initial; umflossene Überschrift - Quelltext - Cascading Style Sheets

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>Ver&auml;nderter erster Buchstabe: Initial; umflossene &Uuml;berschrift - Cascading Style Sheets - Workshop Internet-Pr&auml;senz</title>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Language" content="DE" />
 <meta http-equiv="Content-Style-Type" content="text/css" />

 <meta name="description"
  content="&Uuml;bung Cascading Style Sheets. Ver&auml;nderter erster Buchstabe: Initial; umflossene &Uuml;berschrift." />
 <meta name="keywords" content="HTML, Cascading Style Sheets" />
 <meta name="author" content="Roland Unger" />

 <style type="text/css">
 <!--

  .initial:first-letter {
     font-size: 2.0em;
     line-height: 100%;
     float: left;
     margin: 0 0.2em 0 0;
     padding: 0.3em 0 0 0;
     font-weight: bold;
     color: #ff0000;
  }

  h3 {
     margin: 0 1em 0.5em 0;
     padding: 0.3em;
     border: 1px solid #000;
     width: 10em;
     float: left;
  }

 -->
 </style>
</head>

<body>

<h1>Workshop Internet-Präsenz</h1>

<h2>Veränderter erster Buchstabe: Initial; umflossene Überschrift - Cascading Style Sheets</h2>

<p class="initial">Der erste Buchstabe dieses Absatzes
ist als roter Initialbuchstabe dargestellt. Damit der
Initialbuchstabe nicht auf der Grundlinie der ersten
Zeile steht, muss man ihn umfließen lassen.
Denken Sie bitte daran, dass die beiden
Pseudo-Elemente :first-letter und first-line nicht bei
inline-Elementen verwendet werden können.</p>

<h3>Überschrift</h3>

<p>Wie dieses Beispiel zeigt, lässt sich das Umfließen für jedes
Block-Element anwenden. Die wichtigste zusätzliche Angabe ist die
Beschränkung der Breite, in unserem Fall auf 10 em. Aus optischen
Gründen ist ist günstig, für ein links (rechts) umflossenes Element
einen rechten (bzw. linken) und einen unteren Rand vorzusehen.</p>

</body>
</html>