davidgagne.net

  • About
  • Archives
  • Twitter
  • Facebook
  • bartender.live
  • GitHub
  • LinkedIn

DropCaps

May 10th, 2002 @ 1:30 am PDT

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.

More posts tagged:
css / dropcap / style / web design

More posts categorized:
Web Design

More posts from:
May 2002 / 2002

Post navigation

Previous Post
Previous Post Questions: The Anti-Drug
Next Post
Next Post Main Index Template

Responses to “DropCaps”

  1. May 10th, 2002 @ 4:02 am
    Tobias

    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.

  2. May 10th, 2002 @ 9:08 am
    dvg

    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 )

  3. May 10th, 2002 @ 9:20 am
    Tobias

    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 =)

  4. November 9th, 2003 @ 11:59 am
    Al Pease

    Am trying to add an inline color change to just the first letter of a link.
    Ideas??
    Thanks

Comments Closed

New comments are disabled on this post.

Search


Awesome Web Hosting

Awesome Web Hosting

I've trusted DreamHost to power this website – and nearly 100 other ones – since March 22, 2001. They have great prices, excellent customer support, and a killer web interface to manage your domains.

  • Get Your Own Website

© David Vincent Gagne. All rights reserved. Custom WordPress Theme by Jacket Industries.