1234
Om deze dropcaps te kunnen gebruiken op jouw pagina's moet je even de onderstaande stylesheet in de head-sectie van jouw pagina plaatsen. De broncode van de vier cijfers is ook hieronder te vinden. Wijzig de code van de "html" en de afmeting(en) en kleurstelling van de dropcaps (in de stylesheet) naar jouw eigen smaak. Vergeet niet om een div (of een "p" o.i.d.) onder de laatste "dropcap", met style="clear:both", toe te voegen. Dit omdat standaard er een float:left in de CSS-code staat vermeldt. Als je niet wilt dat de tekst (of een andere dropcap) aan de rechterkant (van de laatste dropcap) "vloeit", kan je natuurlijk de float left uit de stylesheet verwijderen.
<style type="text/css">
.dropcap{
float:left;
font-size:1.6em;
padding:0 0.15em;
margin:0 0.15em 0 0;
background:#ff442B;color:#fff;
border:3px outset #22ff55}
.dropcap:hover{
background:#ff662B;color:#fff}
</style>
<p>
<span class="dropcap">1</span>
<span class="dropcap">2</span>
<span class="dropcap">3</span>
<span class="dropcap">4</span>
</p>
<div style="clear:both"></div>