|
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
|
| Anchor Properties and Values and Letter Properties |
a:link
a:visited
a:hover
a:active
|
a:link {text-decoration: yes} -link on the page
a:visted {color: red; text-decoration: underline}visited link
a:hover {background:yellow} mousing over link
a:active {text-decoration: none} mouse on the link
|
| first-letter | The first letter of the element text |
| first-line | First line of the element text |
|
First-letter and First-line Examples
|
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">
/*css comment to document rules: define id rule for the font*/
p{font-size:10pt;font-family: helvetica;line-height:14pt}
/*define id rule for dropcaps*/
#dropcaps:first-letter{ font-size:400%; color:#ff00ff;
float:left; margin-right:5px; line-height:0.8;font-style:normal}
/*define id rule for first-line*/
p:first-line{font-style:italic;font-weight:bold}
</style>
|
|
|
|