Learn CSS, part 7: Pseudo Elements

The ::first-letter pseudo element applies your styling rules to the first letter of the first word of the first line in block level elements. A block level element is that element that occupies its parent element's complete area (we will talk about this later in the series). I think that by now you understand what it does, so let's take a look at an example. Add the following CSS code to the CSS file:

::first-letter
{
  background-color: blue; 
  color: yellow;
  font-size: 2em;
  font-family: Tahoma;
}

This code will style the first letter of the first word of the first line in all the block level elements to have a blue background with yellow text as Tahoma 2 em. Reload the Web page to see the effect.

Okay, I know that some of you now may be saying "How does the ::first-letter override the styling rules of the ::first-line?" and some others would say "How do some selectors override the styles of other selectors?" I will answer these questions in the article covering inheritance and cascade, which is coming soon in the series. As you can see, only the block level elements (the <p> and <div> elements) have been styled. The <span> element has not been styled because it's an inline element.

With the ::first-letter pseudo element you can use color properties, background properties, padding properties, margin properties, border properties, clear, line-height, text-shadow, text-decoration, text-transform and float. These are discussed in the appropriate articles in the series. This pseudo element is supported in IE 5.5, 6 and Mozilla 1.7 and Opera 7.5