Pseudo-Elements

Let's now look at a pseudo-element, which is used to add "special effects" to some selectors. The basic format of the pseudo-element is shown below. Notice that a colon separates the selector and the pseudo-element:

selector:pseudo-element {property: value;}

The first-letter pseudo-element is used to add a unique style to the first letter in an selector. If we want to add the first-letter pseudo element to the paragraph selector, we use:

p:first-letter {property: value;}

Knowing this, it shouldn't be a huge challenge for you to make the first letter in every paragraph red. Let's throw it into the rest of the style group where it belongs:

<style type="text/css">
<!--
body {background-color: #669900; color: #99FF00; font-family: Trebuchet MS, Verdana, Arial, sans-serif; margin-top: 20px; margin-left: 10%; margin-right: 10%;}
h1 {font-size:36px; color:#FFFFFF; font-family: Verdana, Arial, sans-sefif; text-align: center; text-decoration: underline; text-transform: capitalize;}
p {font-size: 12px; color: #FFFFFF; text-align: justify; line-height: 1.2;}
p:first-letter {color: #FF99FF;}
-->
</style>

Test it out! Be very amazed! Choose a color you like, then change the font-size too:

<style type="text/css">
<!--
body {background-color: #669900; color: #99FF00; font-family: Trebuchet MS, Verdana, Arial, sans-serif; margin-top: 20px; margin-left: 10%; margin-right: 10%;}
h1 {font-size:36px; color:#FFFFFF; font-family: Verdana, Arial, sans-sefif; text-align: center; text-decoration: underline; text-transform: capitalize;}
p {font-size: 12px; color: #FFFFFF; text-align: justify; line-height: 1.2;}
p:first-letter {color: #FF99FF; font-size: 24px}
-->
</style>

OK, check it out:

I bet you didn't expect that today! OK, try a few different combinations until, again, you find something you like.