| Previous | Table of Contents | Next |
Certain elements of an HTML document can be assigned a unique appearance based on their function, not on their location within the document, or on other factors defined by the browser. These are known as pseudo-classes and pseudo-elements and do not appear as part of the HTML code. The browser, however, still recognizes them by other means and treats them like actual classes and elements.
The most common example of the pseudo-class is evident in the way that browsers display link text. All web users are familiar with the blue, underlined text that identifies a hyperlink in most standard browser configurations. The link text itself is identified in the HTML document by the use of the <A> tag with the HREF= attribute. However, you have probably also noticed that the color of the link text changes after you visit the link’s URL.
Typically, the text changes from a bright blue color to a duller aqua, although the colors and text decorations that are used are configurable in most browsers. This color reverts back to its original appearance after a length of time that the browser specifies.
This change in state is not apparent in the HTML code, but the CSS1 standard permits you to specify pseudo-classes in your selectors for the <A> tag that respond to the various link states that the browser defines.
Pseudo-Class A pseudo-class is a means of selecting certain text in an HTML document and is based on other external conditions applied by the web browser, not on the HTML code of the document itself.
The CSS1 standard defines three pseudo-classes that relate to the state of links in a web browser. These differ from actual classes (like those discussed in Lesson 4) because there is no indication of them in the body of HTML documents themselves. They can, however, be addressed by styles in nearly the same way as normal classes.
The pseudo-classes for the <A> tag are applicable only when the HREF= attribute is included in the tag. This is only when <A> is used to actually indicate a link. The <A> tags with the NAME= attribute, which are used to create targets for internal document links, are not affected by pseudo-classes.
The three pseudo-classes recognized by the CSS1 standard are as follows:
Active Links The A:active pseudo-class applies only to the link on which the user is currently clicking the mouse. It is therefore applicable only during the brief transitory period while the link is being selected. Only the Netscape browser defines a separate color for this state. The A:active pseudo-class will, therefore, have no effect in the Internet Explorer.
These pseudo-classes are specified as selectors in style rules (just as any other class selector would be) except that a colon is used between the selector and the class instead of a period. Typical rules that alter the appearance of anchor links appear as follows:
A:link {font-size: 130%;
color: white;
background: black;
text-decoration: none}
A:visited {font-weight: bold;
text-decoration: none;
font-style: italic;
color: red;
background: white}
Notice that the text-decoration property is applied with a none value. This overrides the underlining that is part of the browser default style for anchor links.
To see the effect of these styles, add the rules shown above to the <STYLE> block of your SAMPLE2.HTML file and add some anchor links to Internet sites to the paragraph text of the document. When you load the document in your browser, the links should appear like the words HTML style sheets in Figure 17.1 with white text on a black background. If you follow one of the links to its target, and hit the back button to return to your page, you should see that the link has changed to red, bold italic text on a white background, like the words Internet Explorer 3.0 in the Figure.
)
Figure 17.1 Pseudo-classes
allow you to modify the appearance of hyperlinks in your documents.
Displaying Properties In order for your links to display the properties assigned to the A:visited selector, they must point to files on another machine. Links to pages on a local drive will never be shown as “visited.”
You can also combine pseudo-classes with other style techniques to isolate link text in certain areas of a document. Define contextual selectors with the A:link or A:visited as one of the elements, in the usual manner. A pseudo-class selector can also be used along with a real class selector, as long as the real class selector is specified in the rule before the pseudo-class. This would appear as follows:
){kind=link}
A.external:link {font-size: 130%;
color: white;
background: black;
text-decoration: none}
The style rule shown would be applied only to text that was contained within anchor tags that included both an HREF= attribute and a CLASS=external attribute, as follows:
<A HREF="http://www.microsoft.com" CLASS=external>Internet Explorer 3.0</A>
In addition to pseudo-classes, you can also apply styles to pseudo-elements. A pseudo-element identifies a portion of another element according to the way the browser presents it. As with pseudo-classes, there is nothing in a document’s HTML code to indicate the existence of these structures.
The CSS1 standard recognizes two pseudo-elements to which styles can be applied: first-line and first-letter. The first-line pseudo-element refers to the first line of text in any element as the browser displays it. Because its value can be changed simply by resizing the browser window, this structure cannot be coded in HTML.
Explorer Support Internet Explorer 3.0 does not support the use of pseudo-elements as selectors but does support pseudo-classes.
Style properties that are defined for the first-line pseudo-element only apply to the first line of any text element. If you adjust the margins or the font size or make any other changes that affect the length of the line, the selected text also changes.
You can create interesting effects by applying a style that emphasizes the first line of a paragraph using a different color, a larger font size, or bold or italic text, as shown in Figure 17.2.
)
Figure 17.2 Pseudo-elements
allow you to apply styles to specific parts of other elements.
The first-letter pseudo-element performs the same function for the first letter of any element. This can be used to emulate the technique of using a large and elaborate capital letter to begin a paragraph or page.
Pseudo-element selectors are notated in style definitions much like pseudo-classes, as shown:
){kind=link}
P:first-line {font-size: 150%}
P:first-letter {font-size: 400%;
font-family: Zapf Chancery , Times New Roman , cursive}
Pseudo-classes and pseudo-elements are subject to the same rules of inheritance as other elements. If desired, both of these rules can be applied to the same text element. The P:first-letter element would behave like the child of the P:first-line element.
Pseudo-elements can be used in contextual and class selectors, just like pseudo-classes, except that the pseudo-element must be the last of the multiple selectors specified in a contextual selector, as shown:
P.heading:first-letter {font-style: bold}
DIV P:first-line {font-size: 150%}
In this lesson, you learned how to apply styles to special selectors that are not revealed by a document’s HTML code. In the next lesson, you learn how to use style definitions that are stored in a separate file.
 |
 |
 |