Page 1 of 2 
Magazine Style CSS Drop Caps
By Michelle Goodrich -- Mandarin Design
(Updated: JUNE 2006)
The
first letter in this paragraph is big.
Magazines use the drop cap technique and
CSS2 includes the first-letter
pseudo class,
but we want more control and we want to use
use inline style
so we are using a span to make
the first letter of the paragraph
big.
In all fairness to the paragraph itself we probably should type enough to see
how it looks when it is surrounded by its textual friends by using more words.
For one-time or occasional use you may not
want to add the code to the style sheet.
A dropcap (drop cap, drop-cap, or first initial letter) is a likely candidate
for CSS inline style.
We don't use it enough to
clutter our style sheet with the extra CSS.
Instead we do it with inline style, a simple span.
Mozilla Firefox and IE look the same
For this one we want to force the first big letter to span about five lines.
The font-size is adjusted to exactly 100 pixels font-size:100px; while the line height is 70 pixels line-height:70px;.
We tried a line-height of 80 but that leaves a little too much white space.
To make the top of the first big letter align with the text a padding of 2 pixels padding-top:2px; was added to make the initial letter
drop down ever so slightly.
No math, just guessing.
Magazine or novel style drop caps can add interest to a page if there is enough text to make the
adornment work well. We need more text to get the look we want here.
Actually for this example we need a lot more text since the drop cap is big.
Copy and paste this in your Blog or Web page.
It will look like this.
For this one we want to force the first big letter to span about five lines. The font-size is adjusted to exactly 100 pixels while the line height is 70 pixels. We tried a line-height of 80 but that leaves a little too much white space.
The CSS looks like this.
.dropcap {
float:left;
color:#D4D4C7;
font-size:100px;
line-height:70px;
padding-top:2px;
font-family: Times, serif, Georgia;
}
The HTML looks like this.
<p>
<span class="dropcap">T</span>his starts with a dropcap.
</p>
It will look like this in your browser.
This starts with a dropcap.
The first letter in this paragraph is big. We used a font size of 36pt, and a height of 24pt. You can change the font size and adjust the height of the drop cap as needed. This drop cap will span a few lines with extra whitespace.
Copy and paste this in your Blog or Web page.
It will look like this.
The first letter in this paragraph is big. We used a font size of 36pt. You can change the font size and adjust the height as needed. This drop cap will span a few lines with extra whitespace.
The style can be added to the external CSS Style Sheet or in the HEAD section of the page.
Put the CSS style between the <head> and the </head> in the top of the page. We are using the
color named black. You can change the color to any named color
Add this CSS to your style sheet.
Copy and paste the HTML in your page.
It will look like this.
This is the drop cap.
This
is a little bigger with the line-height adjusted to fit the style. When we change the font to font-size:56px; the line-height is
also adjusted. We are using line-height:48px;. This drop cap will span a few lines without a lot of extra whitespace.
The font-size and line-height can be
adjusted to make the drop cap fit your page style.
Copy and paste this in your Blog or Web page.
It will look like this.
This is a little bigger with the line-height adjusted to fit the style.
The :first-letter pseudo element may be used for "initial caps" and "drop caps", which are common typographical effects. This type of initial letter is similar to an inline-level element if its 'float' property is 'none', otherwise it is similar to a floated element.
W3 :first-letter pseudo-element
The first-letter
pseudo element can be styled to suit your needs, but we find
more consistency across browsers using the span.
This is the first-letter pseudo element in action. We added some style
to our first-letter. We made the
font-size 300%, added the float:left,
and then fiddled with it a little more to suit our particular style.
Add this CSS to your style sheet.
Copy and paste the HTML in your page.
It will look like this.
The first-letter pseudo element can be styled to suit your needs.
This is the first-letter in action.
We added some style to our first-letter.
There was some adjusting to get the top of the first letter
to align with the top of the first sentence.
The W3
reference for the :first-letter pseudo-element includes an example
that might suit your style.