Drop Caps - Pseudo Elements :first-letter and :first-line

The two pseudo-elements are :first-letter and :first-line are used to add flare to the paragraph.Drop caps style has been used in desktop publishing to draw attention to the first paragraph. It creates a style for the first-letter of a paragraph. The p:first-line identifies the style for all paragraph first lines. Drop cap style is created using style sheet and pseudo-element: first-letter plus other style rules.

  • Define the paragraph style
  • Define the style for the first-letter and first-line
  • Use class or id
  • Float attribute causes the text to wrap around the text

Roses are the most popular garden flower. Highly valued for its form, fragrance and endless variety of color. Crossbreeding and raising new varieties allowed for greater progress in the development of newer and hardier roses.

<style type="text/css">
p{font-size:10pt;font-family: helvetica;line-height:14pt}
/*define id rules for dropcaps*/
#dropcaps:first-letter{ font-size:400%; color:#ff00ff; float:left; margin-right:5px; line-height:0.8;font-style:normal}
p:first-line{font-style:italic;font-weight:bold}
  </style>
Div and Span Elements
Classes and IDs
Pseudo Classes
Drop Caps
Drop Shadow
Display Attributes
Web Design with XHTML Part II
Prince George's Community College
Doris Cuffey, Instructor