Saturday, December 8, 2007

How to create a dropcap

Found a few good sites that talk about how to make the first letter of the paragraph bigger and dropping to align with the rest of the line. Here's what is looks like before:

The first letter is ordinarily looking.

The first letter is bigger and lower.


Here's what you do:

Add the CSS code between your <head> and </head>.

<style type="text/css">
.firstletter:first-letter {
font-size:400%;
float:left;
line-height:.8em;
color:#D4D4C7;
}
</style>

and surround your paragraph with <p class="firstletter"> and </p>

for example,

<p class="firstletter">Enclose the line between the tags. </p>

For more details, please check this website which also points to the W3 website for reference.

No comments: