Front and Center: More Pseudo-Elements

You already know that the a element has several pseudo-elements so that you can define a style for different states of a hyperlink. Most Web developers use these pseudo-elements in their style sheets, but many Web developers don't know other pseudo-elements exist that you can use to make your pages stand out.

The first-letter pseudo-element allows you to adjust the style for the first letter in an HTML element as long as the element is a block-level element. A block-level element is an element that is used to format an entire block of characters instead of specific characters within a line of text. For example, the <table> element is a block-level element, and so is the <p> element.

TIP

FrontPage's Design view does not show the effects of block-level pseudo-elements. To see the effect, you will need to view your page in Preview view or by previewing it in a browser.

The following CSS style formats the first letter of a paragraph so that it will stand out by formatting it at twice the size of the surrounding text and in a different color. It formats the rest of the paragraph with a different font, font size, and color.

 p:first-letter { font-family: Times New Roman;                  font-size: 200%;                  text-decoration: overline;                  text-transform: capitalize;                  color: #CC3300;                  font-weight: bold } p              { font-family: Arial;                  font-size: 10pt;                  color: #000000 } 

Figure 19.20 shows two paragraphs on a page linked to the style sheet. Notice that the first letter of each paragraph is formatted using the first-letter pseudo-element.

Figure 19.20. Paragraphs formatted with the first-letter pseudo-element look similar to a magazine article format.

In addition to the first-letter pseudo-element, block-level HTML elements also have a first-line pseudo-element that can be used to format the first line. This is an extremely powerful pseudo-element because it can allow you to achieve results that would otherwise be impossible.

Suppose that you have a paragraph of text and you want the first line of that paragraph to appear bolded and the rest of the paragraph to appear unbolded. You could apply direct bold formatting to the characters that appear in the first line, but as soon as the browser window is resized or viewed on a monitor at a different resolution, some of the characters that were originally on the first line might move to the second line or characters the were not previously on the first line might move to the first line. Your formatting will then look sloppy and unprofessional. Using the first-line pseudo-element, you can easily apply the effect so that it works correctly at all browser window sizes, screen resolutions, and text size settings.

The following style sheet formats the first line of paragraphs as bolded and the rest of the paragraph as normal text.

 p:first-line { font-family: Arial;                font-size: 10pt;                color: #000000;                font-weight: bold } p            { font-family: Arial;                font-size: 10pt;                color: #000000 } 

Figure 19.21 shows the result of this formatting. As the browser window is resized, the bolded characters will change depending on whether they appear on the first line of the paragraphs.

Figure 19.21. These paragraphs were formatted using the first-line pseudo-element.

As you can see, CSS formatting is an extremely powerful tool for Web developers. You owe it to yourself to experiment with CSS and learn as much as you can about it so that you will be able to quickly and easily format your Web site with this flexible and powerful technology.