first letter & first-line pseudo element
To create a different first letter of a style, such as the
one on this paragraph, use the following in your style sheet and adapt it to
your needs. You can also use the first-line pseudo element to determine the
attributes of the first line of a style block element.
first letter
P.intro {
font-family : "Trebuchet MS", arial, helvetica, sans-serif;
font-size : 12px;
font-weight : bold;
color : #003366;
text-align : left;
}
P.intro:first-letter {
font-family : "Times New Roman", times, serif;
font-size : 24px;
font-style: italic;
color : #99CCCC;
}
This will make the first letter of the paragraph with the class "intro" a
different font, a larger size, a different color and italic. Experiment with the
attributes to get the effect that suits your site.
First line
P.intro {
font-family : "Trebuchet MS", arial, helvetica, sans-serif;
font-size : 12px;
font-weight : bold;
color : #003366;
text-align : left;
}
P.intro:first-line {
font-family : "Trebuchet MS", arial, helvetica, sans-serif;
font-size : 12px;
text-transform: uppercase;
}
This will make the whole of the first line uppercase. Experiment with the
attributes to get the effect that suits your site.
w
Website design by the morenmore group
FREE Java
Local Business & Entertainment Links +
Accommodation & Shopping Click Here!
|