Drop Cap Example

This paragraph uses what is called a "drop cap" which is where the first letter is larger than the rest of the text and the letter "drops" down to display the top of the letter even with the top of the surrounding text. This is relatively easy to do using cascading style sheets (CSS). Here is the CSS code used in this example:

<style type="text/css">
.dropcap {
   display: block;
   float: left;
   font-size: 300%;
   font-family: Georgia, "Times New Roman", Times, serif;
   font-weight: bold;
   height: .8em;
   margin-bottom: -.4em;
   padding: .2em .1em 0 0;
}
	

You apply this by wrapping the first character in a <span> tag:

<p><span class="dropcap">T</span>his paragraph ... </p> 

To get it to line up correctly, you may need to adjust the margins and/or padding to accomodate the font and size you're using, but once you have it, changes in the text size in the browser will not affect the alignment.