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:
.dropcap{
font-size: 300%;
float:left;
font-weight:bold;
}
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.
Responses to “DropCaps”
Comments Closed
New comments are disabled on this post.
couldn’t you also do it with the :first-letter pseudo-element? That way you wouldn’t have to create a class around the first letter in every entry.
W3.org recommends against it. According to them the :first-letter pseudo-element is not widely supported and using the method I describe here is preferred. (http://www.w3.org/WAI/GL/WD-WCAG10-TECHS-20000615/css-techniques.html#style-fonts )
Maybe I’m reading the wrong paragraphs of the W3C document you linked, but it only tells you to use CSS instead of deprecated elements such as the FONT tag in HTML. It doesn’t tell you to not use elements that aren’t yet well-implemented. It does admit that first-letter is not widely supoorted “as of the writing of this document”. The document is almost 2 years old now and browser support for first-letter isn’t so bad anymore (IE5.5+, Netsie 6+ and Opera4+ support it. It of course doesn’t work in IE5, while your method does, but I guess I’m just too much of a lazy bastard to put in the class in every entry and would rather let CSS do the work for me =)
Am trying to add an inline color change to just the first letter of a link.
Ideas??
Thanks