Have you ever wanted to format the first letter of a paragraph so that it was larger than the rest of the text in the paragraph? This effect – commonly seen in print – is called the “dropcap”. The easiest way to do this is with a little bit ‘o CSS. It works in most browsers and adds a smidge of flair to your site. You only need to utilize three style attributes to get it to work.
Just add a class to your style sheet called .dropcap like this:
Then wrap the first letter of the first word of your paragraph in a set of <span> tags set to class=”dropcap”. (Note: I like to add a line-height:normal; in there just to be on the safe side.)
Even if you’re not using a cascading style sheet to control your site’s layout, you can still implement this trick. Just wrap <span style=”float:left;font-size:300%;font-weight:bold;line-height:normal;”></span> around the first letter and it should work.
New comments are disabled on this post.