Custom Designed First Letter of Paragraph

Designing the first letter of specific paragraphs

The first letter of a web page paragraph may be designed pretty much as you please. The design may be a larger or smaller font, floated for text wrap, bordered, with or without a special background, vertically aligned, decorated, and/or transformed. This paragraph itself is an example. The first letter is floated left, a different color, and decorated with an underline.

This is the CSS used for the initial capital letter.

<style type="text/css">
span.initial_letter {
   float: left;
   font-size: 3.25em;
   line-height: 0.83em;
   font-family: Georgia, "Times New Roman", Times, serif;
   text-decoration: underline;
   color: #00f;
   padding-right: 0.125em;
   }
</style>

And here is the source code of that first paragraph.

<p>
<span class="initial_letter">T</span>he first letter of a web 
page paragraph may be designed pretty much as you please. The 
design may be a larger or smaller font, floated for text wrap, 
bordered, with or without a special background, vertically 
aligned, decorated, and/or transformed. This paragraph itself is 
an example. The first letter is floated left, a different color, 
and decorated with an underline.
</p>

Notice the first letter of the paragraph is in a span tag with class="initial_letter". The initial_letter style is applied to the letter in the span tag.

Parenthetically speaking, the span tag may contain more than one letter. Here is the article's entire first paragraph repeated, except with the first word having the initial_letter style instead of only the first letter.

The first letter of a web page paragraph may be designed pretty much as you please. It may be, for examples, a larger or smaller font, floated for text wrap, bordered, with or without a special background, vertically aligned, decorated, and/or transformed. This paragraph itself is an example. The first letter is floated left, a different color, and decorated with an underline.

Designing the first letter of every paragraph automatically

The first letter of every paragraph on a web page can be designed automatically with one CSS style. Style example:

<style type="text/css">
p:first-letter {
   font-size: 3em;
   line-height: 0.25;
   font-family: Georgia, "Times New Roman", Times, serif;
   color: gold;
   }
</style>

The p:first-letter selector applies the first-letter style to every paragraph with a p tag on the web page – without putting the letter in a span tag.

Note that first-letter styles only the first letter, not the first word.

The CSS style is not live on this page. Otherwise, the first letter of every paragraph of this article would be 3 times normal size and gold colored.

To see the effect it has, paste the style on a test page.

Available first-letter styles

These properties may be used when designing the first letter of paragraphs as described above:

font properties color properties background properties margin properties padding properties border properties text-decoration vertical-align (only if float is 'none' or absent) text-transform line-height float clear

Other properties may also be used, such as text-shadow, that work with only some browsers. If in doubt, give it a try on a test page. CSS :first-letter pseudo-element is a good reference.

How to implement

Decide whether to (a) design the first letter (or first word) of one or more specific paragraphs or (b) design the first letter of every paragraph automatically.

To design the first letter (or word) of specific paragraphs, use the method described first in this article. Specify the CSS style, then use a span tag around the first letter (or word) of the paragraph to affect.

Otherwise, to design the first letter of every paragraph on a web page automatically, use the second method described here, the CSS style with the p:first-letter selector.

Either way, the first letter of paragraphs is custom designed.

Will Bontrager