Chapter 57. Using Pseudo-Elements


In CSS, pseudo-elements are special add-ons to HTML tag selectors. They identify particular sections of the text inside the HTML element. Currently, there are two pseudo-elements: first-line and first-letter. You can apply them to any text tag or any tag that contains text, such as a table or a div.

Any old style sheet might identify a general paragraph style:

 p {   font-family: Arial, Helvetica, sans-serif;   font-size: 14px; } 

Only an especially clever style sheet adds a pseudo-element that instructs the browser what to do with the first line in a paragraph:

 p {   font-family: Arial, Helvetica, sans-serif;   font-size: 14px; } p:first-line {   font-weight: bold;   font-variant: small-caps; } 

GEEKSPEAK

A CSS pseudo-element is a special add-on to an HTML tag selector that identifies a particular section of the text inside the element.


See the effects for yourself in Figure 57.1.

Figure 57.1. The first-line pseudo element identifies a special style for the first line of a text element, like this paragraph.


The first-letter pseudo-element works much the same way, only it affects the first letter of the text, not the entire first line:

 p {   font-family: Arial, Helvetica, sans-serif;   font-size: 14px; } p:first-letter {   font-family: "Times New Roman", Times, serif;   font-weight: bold;   font-size: 48px; } 

FAQ

How do I know where the first line ends?

The width of the browser window determines where the first line ends. Therefore, you, the designer, lose a degree of control over exactly which text gets the first-line treatment. If you like to remain in complete control of your text, you should forego the first-line pseudo-element and drop span tags around the exact string of text you want to change. Then, apply a special style definition to the span tag's style attribute.


Figure 57.2 shows these style rules in action.

Figure 57.2. The first-letter pseudo element identifies a special style for the first letter of a text element.


TIP

Remember, even though the examples in this topic show paragraphs, you can use the first-line and first-letter pseudo-elements with any text tag or container tag, such as a table or div.


TOOL KIT

Style Sheet for Drop Caps

In the publishing game, a drop cap is an oversized capital letter that usually appears at the beginning of a chapter. It's different from the example in Figure 57.2, though, in one notable way: It hangs below the baseline of the text, and the first three or so lines of type in the paragraph wrap around it, as in Figure 57.3.

Figure 57.3. A drop cap is an oversized capital letter that hangs below the baseline of the text. The next couple of lines of type wrap around it.


This Toolkit gives you a style rule for drop caps. Just copy and paste it into an existing style sheet. Don't be afraid to tinker with the font size. You'll probably need to fine-tune the style for your particular page, depending on the typeface and type size of the running text. The drop cap should clear three to four lines of type. Capital letters with descenders, or portions that dip below the baseline, like the capital letter Q in a serif typeface, clear four lines of type, while normal capital letters clear three.

Feel free also to add other CSS attributes to the style rule, such as a background color or some extra padding.

[View full width]

p.dropcap:first-letter { font-family: Georgia, "Times New Roman", Times, serif; font-weight: bold; font-size: 63px; /* This font size assumes the running text is 14 pixels and that the drop cap clears three to four lines of type. */ float: left; /* The float attribute is the secret weapon that makes the drop cap work. When an element floats, the browser wraps surrounding elements around it. An element can float to the left or right. */ padding-right: 2px; /* A little padding on the right side of the drop cap helps to avoid collisions between the drop cap and the surrounding lines of type. */ }

To use this style rule, set any paragraph to the class dropcap:

 <p >Once upon a time, in a land far away....</p> 

Since the dropcap class in this Toolkit is exclusive to paragraphs, you can't add a drop cap to a header, table, or any other type of tag. If you want the dropcap class to work with any applicable element, including paragraphs, simply remove the paragraph tag from the selector, like so:

 .dropcap:first-line { 


GEEKSPEAK

A drop cap is an oversized capital letter that usually appears at the beginning of a chapter. It hangs below the baseline of the text, and the surrounding lines of type wrap around it.


GEEKSPEAK

Descenders are portions of letters that dip below the baseline of a line of type, like the stem of the lowercase letter p.


FAQ

This drop cap looks ridiculous in Netscape. What gives?

Drop-cap styles, including the one in this Toolkit, tend to look better in Internet Explorer than in Netscape, because Netscape adds an inordinate amount of whitespace above the top of the drop cap. To improve the look of this style in Netscape, add a background color to the style definition. This puts the drop cap inside a colored box, which makes the whitespace above the letter less jarring.

For a better-looking yet patently silly workaround, you can add negative top and bottom margins to the style definition:

 margin-top: -12px; margin-bottom: -12px; 

Doing this pushes the drop cap up, but it also gives you an extra 12 pixels of whitespace before the paragraph begins.

At least the negative margins don't affect the appearance of the drop cap in Internet Explorer, so this solution is cross-browser-friendly.




Web Design Garage
Web Design Garage
ISBN: 0131481991
EAN: 2147483647
Year: 2006
Pages: 202
Authors: Marc Campbell

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net