We left off learning about the various positions in CSS. In this tutorial we will cover the pseudo classes and pseudo elements, which allow us to add special effects to our selectors. An example would be roll-over effects on hyperlinks, or making the first letter of a sentence larger and a different color than the rest of the text.
CSS: Pseudo - Dealing with the :first Line Pseudo Element (Page 2 of 4 )
The :first line pseudo element is very similar to the :first letter pseudo element, as I am sure you nerdy rocket scientists have figured out. The difference is that with :first line, <insert M. Knight Shamalyan surprise ending here> the first well, line is affected. Duh. Here it is in code for you non-believers:
<html>
<head>
<style type="text/css">
p:first-line
{
color: blue;
font-variant: small-caps;
font-family: Impact;
font-size: xx-large
}
</style>
</head>
<body>
<p>
Coming to a theatre near you: JAMES PAYNE'S KNUCKLE SAMMICH!
Just when you thought it was safe to eat a sandwhich...
</html>
You can of course mix the :first letter/:first line like so:
<html>
<head>
<style type="text/css">
p:first-letter
{
color: yellow;
font-size:xx-large;
text-decoration: underline overline
}
p:first-line
{
color: purple;
font-family: impact
}
</style>
</head>
<body>
<p>
Not many people think to combine yellow and purple colors together; that's because they are idiots.</p>