Lessons Community Resources Tools

Drop Cap

Ever read an old book or a newspaper, the first alphabet of some paragraphs are a bit diffrent than the rest, that effect is called a drop cap. CSS allows webmasters to use a drop cap on their pages.

Example:

The first alphabet of this paragraph has a drop cap.

The first alphabet of this paragraph has a drop cap.

Code:

<HEAD>
<STYLE TYPE="text/css">
<!--
p : first-letter {font-size : large}
.paragraph : first-letter {
  color : navy;
  font-size : large;
  font-style : italic;
  font-family : times,serif;
  font-weight : bold;
}
-->
</STYLE>
</HEAD>

Like wise you change the appearance of first line of a paragraph from the rest.

Example:

”Men wanted for hazardous journey. Small wages, bitter cold, long months of complete darkness, constant danger, safe return doubtful. Honor and recognition in case of success”.

Code:

<HEAD>
<STYLE TYPE="text/css">
<!--
p : first-letter {
  color : purple;
  font-weight : bold;
  font-family : times,serif;
  text-align:center;
}
-->
</STYLE>
</HEAD>