CSS: Pseudo
(Page 1 of 4 )
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.
We will begin our discussion by working with Pseudo-elements.
Dealing with the :first Letter Pseudo Element
The :first letter Pseudo Element allows us to change the first letter of our selector by adding a special effect to it. Below is an example of how to make the first letter larger than the rest of the text:
<html>
<head>
<style type="text/css">
p:first-letter
{
font-size:xx-large
}
</style>
</head>
<body>
<p>
Once upon a time in a land, right down the street, there lived this fat ugly dude that owed me a lot of money. So I sent the politically stupid yet Kung-Fu intelligent Chuck Norris to his house to collect.
</p>
</body>
</html>
Go ahead and try it out. Isn't that a beautiful fairy tale? As you can see, the "O" in "Once" becomes huge. Now let's add some other effects to it. Since this wondrous fairy tale is all about whippin' that butt, let's make the "O" red, like blood:
<html>
<head>
<style type="text/css">
p:first-letter
{
color: red;
font-size:xx-large
}
</style>
</head>
<body>
<p>
Once upon a time in a land, right down the street, there lived this fat ugly dude that owed me a lot of money. So I sent the politically stupid yet Kung-Fu intelligent Chuck Norris to his house to collect.
</p>
</body>
</html>
And finally, we will add some more effects to our first letter to make it look even more spiffy:
<html>
<head>
<style type="text/css">
p:first-letter
{
color: red;
font-size:xx-large;
text-decoration: overline underline;
}
</style>
</head>
<body>
<p>
Once upon a time in a land, right down the street, there lived this fat ugly dude that owed me a lot of money. So I sent the politically stupid yet Kung-Fu intelligent Chuck Norris to his house to collect.
</p>
</body>
</html>
You can add all of the following to :first letter:
You can also mix your classes with your pseudo elements, allowing you to add effects to all of your elements of the same class easily. Behold!
<html>
<head>
<style type="text/css">
div.cool:first-letter
{
color: red;
font-size:xx-large;
text-decoration: overline underline;
}
</style>
</head>
<body>
<div class="cool">
Once upon a time in a land, right down the street, there lived this fat ugly dude that owed me a lot of money. So I sent the politically stupid yet Kung-Fu intelligent Chuck Norris to his house to collect.
</div>
<br>
<div class="cool">Needless to say, there was much bloodshed.</div>
</body>
</html>
Next: Dealing with the :first Line Pseudo Element >>
More Style Sheets Articles
More By James Payne
