home > css > first letter & first-line pseudo element

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.