In this tutorial, I am giving a hanging drop cap example using the CSS.
Hanging Drop Cap Using CSS
The following is the CSS for HTML header part to make character hanging drop cap. CSS defined for two classes hanging-indent and hanging-dropcap.
<style>
*.hanging-indent { padding-left:50px; text-indent:-50px; margin-top:-25px; }
*.hanging-dropcap { position:relative; top:0.55em; left:-3px;
font-size:60px; line-height:60px; font-weight:bold; }
body { margin:10px; width:720px;
font-family:verdana,arial,sans-serif; font-size:18px; }
h1 { margin:10px; font-size:30px; }
p { margin:10px; margin-top:20px; }
</style>The script for the HTML Body part:
<h1>Hanging Drop Cap</h1> <p class="hanging-indent"><span class="hanging-dropcap" >H</span>anging Drop Cap. This drop cap hangs in the margin. No text flows back under the backdrop when it flows past the bottom of the drop cap. The drop cap can be lowered and raised without affecting the line height. Using <code>top</code> and <code>left</code>, you can adjust the position of the drop cap and the position of the text next to the drop cap.</p>
Output
As shown in the featured image of this article.