Many HTML elements have special states or uses associated with them that can be styled independently. One prime example of this is the link tag (<a>), which has not only its normal state, but also a visited state, in which the visitor has already been to the page represented by the link.
A pseudo-class (Table 2.3) is a predefined state or use of an element that can be styled independently of the default state of the element.
Table 2.3. Pseudo-classes
PSEUDO-CLASS
DESCRIPTION
COMPATIBILITY
:active
Element being clicked
IE4[*], FF1, O3.5, S1, CSS1
:first-child
Element that is the first child of another element
IE5/7, FF1, O7, S1, CSS1
:focus
Element that has screen focus
IE5[*], FF1, O7, S1, CSS2
:hover
Element with mouse cursor over it
IE4[*], FF1, O3.5, S1, CSS2
:lang()
Element with language code defined
FF1.5, O8.5, S1.5, CSS2
:link
Element that has not been visited
IE4, FF1, O3.5, S1, CSS1
:visited
Element that has been visited
IE4, FF1, O3.5, S1, CSS1
[*] Only available for link tags until IE7
Picking Link Styles
Most browsers default to blue for unvisited links and either red or purple for visited ones. The problem with using two different colors for visited and unvisited links is that visitors may not remember which color is for which type of link. The colors you choose need to distinguish links from other text on the screen and to distinguish among the different states (link, visited, hover, and active), without dominating the screen and becoming distracting.
I recommend using a color for unvisited links that contrasts with both the page's background color and the text color. Then, for visited links, use a darker or lighter version of the same color that contrasts with the background but is dimmer than the unvisited-link color. Brighter unfollowed links will then stand out dramatically from dimmer followed links.
For example, if I were designing a page with a white background and black text, I might use bright red for my links (#ff0000) and pale red (#ff6666) for visited links. The brighter version stands out; the paler version is less distinctive, but still obviously a link.
Styling Link Pseudo-Classes
Most browsers allow you to specify link colors for different states (a link, a visited link, and an active link) in the <body> tag of the document. With CSS, you can define not only color, but also any other CSS properties that you want the links to have.
Although a link is a tag (<a>), its individual states are not. To set properties for these states, you have to use the pseudo-classes associated with each state that a link can have:
:link lets you declare the appearance of hypertext links that have not yet been selected.
:visited lets you set the appearance of links that the visitor selected previouslythat is, the URL of the href attribute in the tag is part of the browser's history.
In this example (Figure 2.37), I've set up styles for the general <a> tag style and separate styles for the link (unvisited) and visited link states. For ideas on what styles to use with links, check out the sidebar "Picking Link Styles."
Figure 2.37. Both :link pseudo classes are set so that unfollowed links are bold and bright red, while followed links are a duller, paler red.
Text Decoration: to Underline or Not
Underlining has been the standard way of indicating a hypertext link on the Web since its inception. The problem with underlining links is that if you have many links on a page, it becomes an impenetrable mass of lines, and the text is difficult to read. Furthermore, if visitors have underlining turned off, they cannot see links on the page, especially if both link and text colors are the same.
CSS allows you to turn off underlining for links, overriding the visitor's preference. I recommend this practice and prefer to rely on clear color choices to highlight hypertext links. You can use underlining with the :hover state, so when visitors place the mouse over a link, they see a clear visual change.
To set contrasting link appearances:
1.
a {...}
Although not required, it's best to first define the general anchor style (Code 2.18). This differs from setting the :link pseudo-class in that these styles are applied to all of the link pseudo classes. So you want to declare any styles that will remain constant or are only changed in one of the states.
Code 2.18. If the Web page for a link has not been visited, the :link pseudo-class styles are used. If visited, then the :visited pseudo-class styles are used.
[View full width]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Working with Pseudo-classes | Link</title> <style type="text/css" media="screen"> body { font-size: 1.2em; font-family: Georgia, "Times New Roman", times, serif; color: #000000; background-color: #fff; margin: 8px; } #navigation { width: 240px; margin: 0px 8px 8px 0px; border: 3px solid #ccc; float: left; } a { display: block; font-size: larger; padding: 2px 4px; text-decoration: none; border-bottom: 1px solid #ccc; font: small Arial, Helvetica, sans-serif; } a:link {color: #f00;font-weight: bold; }a:visited {color: #c99; } .dropBox { width: 228px; border: 3px solid #999; margin: 0px 0px 8px 8px; float: right; } </style> </head> <body> <div > <p>Flip To Chapter</p> <a href="#">A Mad Tea-Party</a> <a href="#">The Queen's Croquet-Ground</a> <a href="index.html">The Mock Turtle's Story</a> <a href="#">The Lobster Quadrille</a> <a href="index.html">Who Stole The Tarts? </a> <a href="#">Alice's Evidence</a> <a href="index.html">& Previous </a> </div> <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <form action="#" method="get" > Search Book: <input type="text" name="searchTerm" size="24" /> <input type="submit" name="findSearchTerm" value="Find" /> </form> <br /> <h2>CHAPTER IX <span > The Mock Turtle's Story </span></h2> </div> <div > <div > <img src="/books/3/292/1/html/2/alice34a.gif" height="258" width="220" alt="" />So they went up to the Mock Turtle, who looked at them with large eyes full of tears, but said nothing.</div> <p>'You can't think how glad I am to see you again, you dear old thing!...</p> </div> </body></html>
2.
a:link {...}
Type the selector (HTML, class, or ID) of the element you want to style, followed by a colon (:), and then link. You can override styles set for the anchor tag, but this rule should always come before the :visited pseudo-class.
3.
a:visited {...}
Type the selector (HTML, class, or ID) of the element you want to style, followed by a colon (:), and then visited.
Tips
You can also apply the dynamic pseudo-classes :hover,:active , and :focus. See the next section for more information. However, it occurs to me that there should be one more pseudo-class that the W3C has not addressed (see the sidebar "The Missing Link (Pseudo-Class").
The link styles should be inherited by the different states (see "Inheriting Properties from a Parent" later in this chapter). The font you set for the :link appearance, for example, should be inherited by the :active, :visited, and :hover states. But some inconsistencies exist among browsers. That's why I recommend always putting common styles in the anchor tag rule.
The Web is a hypertext medium, so it is important that users be able to distinguish among text, links, and visited links. Because you can't count on users having their Underline Links option turned on, it's a good idea to set the link appearance for every document.
If you use too many colors, your visitors may not be able to tell which words are links and which are not.
I set the link styles for the entire page in this example, but because the links are located only in the navigation, I should probably set them contextually so that those styles are only applied to the navigation links. Otherwise all of the links on the page would force a line break. To do that, I would simply have used:
#navigation a {...} #navigation a:link {...} #navigation a:visited {...}
Then those styles would be applied only to links in the navigation layer.
By associating a class name with the link style, you can set multiple link colors for showing different kinds of links.
The Missing Link (Pseudo-Class)
It seems to me that one link pseudo-class is absent from the available pseudo-classes: :current. A :current pseudo classif it existed, which it does notcould be used to set the style of a link if it was the same as the page currently being displayed. That is, you could set a special style for the menu link of the currently displayed page. This would allow you to easily set a style for the currently selected option in menus.
Until that day arrives, however, we'll have to make do with coding these menu links manually or using a system like the one shown in "Styling Links and Navigation" in Chapter 21.
Styling Dynamic Pseudo-Classes
Once loaded, Web pages are far from static. Users usually start interacting with the page right away, moving their cursors across the screen and clicking hither and yon. The dynamic pseudo-classes allow you to style elements as the user interacts with them, providing visual feedback:
:hover lets you set the appearance of the element when the cursor is hovering over it.
:active sets the style of the element while it is being clicked or selected.
:focus is used for elements that can receive focus, like form text fields.
Although dynamic pseudo-classes can be used to apply styles to any HTML element in theory, earlier versions of Internet Explorer only recognize them when associated with the anchor element. However, using them with other elements will not stop the page from working in Internet Explorer 6 and earlier, but they should only be relied on to enhance the user experience and not relate critical information.
In this example (Figures 2.38, 2.39, 2.40, and 2.41), the :hover and :active pseudo-classes have been applied to a form input button (using the class name .formButton) to create styles when users hover their cursors over the button (Figure 2.39) and click it (Figure 2.40). In addition, the form text input box has the :focus pseudo-class applied to style the box when the user clicks it (Figure 2.41).
Figure 2.38. The page when it first loads, before any dynamic styles are applied.
Figure 2.39. The style for a form button when viewers hover their cursors over it (this is the :hover pseudo-class).
Figure 2.40. The style for a form button that has just been clicked (the :active pseudo-class).
Figure 2.41. The style for a form field that has been clicked (:focus pseudo-class).
To define a dynamic pseudo-class:
1.
input.formButton {...}
Although optional, it's generally a good idea to set the default, non-dynamic style for the element(s) you are about to apply dynamic styles to (Code 2.19).
Code 2.19. Dynamic styles depend on interaction from the visitor. When they move the mouse cursor over an element, the :hover pseudo-class style is used. Clicking an element activates the :active styles, while clicking in a form field activates the :focus pseudo-class.
[View full width]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Working with Pseudo-classes | Dynamic</title> <style type="text/css" media="screen"> body { font-size: 1em; font-family: Georgia, "Times New Roman", times, serif; color: #000000; background-color: #fff; margin: 8px; } #navigation { width: 240px; margin: 0px 8px 8px 0px; border: 3px solid #ccc; float: left; font: small Arial, Helvetica, sans-serif } a { color: #ff0000; padding: 2px 4px; text-decoration: none; border-bottom: 1px dotted #999; display: block; border-bottom: 1px solid #ccc; } input.formButton {border: 2px solid #999;background-color: #eee; }input.formButton:hover {border: 2px solid red;color: #fdd;background-color: red; }input.formButton:active {color: red;border: 2px solid red;background-color: #fdd; }input.formText {border: 2px solid #999;background-color: #fff; }input.formText:focus {border: 2px solid red;background-color: #fcc; } .dropBox { width: 228px; border: 3px solid #999; margin: 0px 0px 8px 8px; float: right; } </style> </head> <body> <div > <p>Flip To Chapter</p> <a href="#">A Mad Tea-Party</a> <a href="#">The Queen's Croquet-Ground</a> <a href="../Copy of LinkStyle/index.html"> The Mock Turtle's Story</a> <a href="#">The Lobster Quadrille</a> <a href="#">Who Stole The Tarts? </a> <a href="#">Alice's Evidence</a> <a href="#">& Previous </a> </div> <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <form action="#" method="get" > Search Book: <input type="text" name="searchTerm" size="24" /> <input type="submit" name="findSearchTerm" value="Find" /> </form> <h2>CHAPTER IX <span > The Mock Turtle's Story </span></h2> </div> <div > <div > <img src="/books/3/292/1/html/2/alice34a.gif" height="258" width="220" alt="" />So they went up to the Mock Turtle, who looked at them with large eyes full of tears, but said nothing.</div> <p>'You can't think how glad I am to see you again, you dear old thing!...</p> </div> </body></html>
2.
input.formButton:hover
Type the selector (HTML, class, or ID), a colon (:), and then hover.
As soon as the mouse pointer enters the element's box (see Chapter 6), the style change will occur.
3.
input.formButton:active {...}
Type the selector (HTML, class, or ID), a colon (:), and then active.
As soon as the mouse clicks within the element's box (see Chapter 6), the style change will occur and then revert to either the hover or default style when released.
4.
input.formText:focus {...}
Type the selector (HTML, class, or ID), a colon (:), and then focus.
As soon as the element receives focus (is clicked in or tabbed to), the style change will occur and revert to the hover or default style when the element looses focus (called blur).
Tips
The dynamic pseudo-classes are often associated with the link tag (<a>), allowing users to see when they are hovering over a link or clicking it. For more details on setting link styles, see Chapter 21.
The order in which you define your link and dynamic pseudo-classes makes a difference for some earlier browsers. For example, placing the :hover pseudo-class before the :visited pseudo-class keeps :hover from working after a link has been visited. For best results, define your styles in this order: link, visited, hover, focus, and active.
You may want to set :focus if you're setting :hover. Why? Hover is applied only to non-keyboard (mouse) interactions with the element. For visitors that cannot or prefer not to use a mouse and instead use only a keyboard to navigate a Web page,:focus will apply.
I recommend using caution when changing some attributes for :hover. Changing things such as typeface, font size, and weight may make the text grow larger than the space reserved for it in the layout, forcing the whole page to refresh, which can really annoy viewers.
First Child Pseudo-Class
Designers often want to apply a style to an element that is the first element to appear within another element, i.e., a parent's first child.
The :first-child pseudo-class lets you specify how to style a particular element when it is the first descendant immediately after its parent.
For example, you might want to style the first paragraph tag of any parent element in a particular way. In Figure 2.42, for instance, the text "Flip to a Chapter" is made more prominent.
Figure 2.42. Because the paragraph is the first child immediately after its parent, it is styled big and red so that it stands out.
To style the first-child of an element:
1.
p:first-child {...}
Type the selector (HTML, class, or ID) of the element you want to style, a colon (:), and then first-child (Code 2.20).
Code 2.20. If the <p> tag is the very first child element of another element, then styles will be applied to it.
[View full width]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Working with Pseudo-classes | First-Child</title> <style type="text/css" media="screen"> body { font-size: 1em; font-family: Georgia, "Times New Roman", times, serif; color: #000000; background-colr: #fff; margin: 8px; } #navigation { width: 240px; margin: 0px 8px 8px 0px; border: 3px solid #ccc; float: left; font: small Arial, Helvetica, sans-serif } a { color: #ff0000; padding: 2px 4px; text-decoration: none; display: block; border-bottom: 1px solid #ccc; } p:first-child {color: red;font-weight: bold;font-size: 1.2em; } .dropBox { width: 228px; border: 3px solid #999; margin: 0px 0px 8px 8px; float: right; } </style> </head> <body> <div ><p>Flip To Chapter</p> <a href="#">A Mad Tea-Party</a> <a href="#">The Queen's Croquet-Ground</a> <a href="index.html">The Mock Turtle's Story</a> <a href="#">The Lobster Quadrille</a> <a href="#">Who Stole The Tarts? </a> <a href="#">Alice's Evidence</a> <a href="#">& Previous </a> </div> <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <form action="#" method="get" > Search Book: <input type="text" name="searchTerm" size="24" /> <input type="submit" name="findSearchTerm" value="Find" /> </form> <h2>CHAPTER IX <span > The Mock Turtle's Story </span></h2> </div> <div > <p>'You can't think how glad I am to see you again, you dear old thing!...</p> <div > <img src="/books/3/292/1/html/2/alice34a.gif" height="258" width="220" alt="" />So they went up to the Mock Turtle, who looked at them with large eyes full of tears, but said nothing.</div></div> </body></html>
2.
<div title-IDARQB3H">Styling for a Particular Language
The World Wide Web is just that, all around the world, which means that anyone, virtually anywhere, can see your pages. This also means that Web pages are being created in any number of different languages.
The :lang() pseudo-class lets you specify styles that are dependent upon the language the Web page specifies it is using.
This next example highlights in red any text that is French (Figure 2.43).
Figure 2.43. The text in the paragraphs that is labeled as being in French is bright red while English text is a lighter red. (Sorry about the French translation.)
To set a style for a particular language:
1.
p:lang(fr) {...}
Type the selector (HTML, class, or ID) of the element you want to style, a colon (:), lang, and the letter code for the language you are defining within parentheses (Code 2.21).
Code 2.21. If the language attribute of a paragraph is set to French (fr), then it will be red. English (en) will be a paler shade of red.
[View full width]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>CSS, DHTML & Ajax | Working with Pseudo-classes | Language</title> <style type="text/css" media="screen"> body { font-size: 1em; font-family: Georgia, "Times New Roman", times, serif; color: #000000; background-color: fff; margin: 8px; } #navigation { width: 240px; margin: 0px 8px 8px 0px; border: 3px solid #ccc; float: left; font: small Arial, Helvetica, sans-serif; } a { padding: 2px 4px; text-decoration: none; display: block; border-bottom: 1px solid #ccc; } p:lang(fr) {color:#f00; } p:lang(en) { color:#f99; } .dropBox { width: 228px; border: 3px solid #999; margin: 0px 0px 8px 8px; float: right; } </style> </head> <body> <div > <p>Flip To Chapter</p> <a href="#">A Mad Tea-Party</a> <a href="#">The Queen's Croquet-Ground</a> <a href="index.html">The Mock Turtle's Story</a> <a href="#">The Lobster Quadrille</a> <a href="#">Who Stole The Tarts? </a> <a href="#">Alice's Evidence</a> <a href="#">& Previous </a> </div> <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <form action="#" method="get" > Search Book: <input type="text" name="searchTerm" size="24" /> <input type="submit" name="findSearchTerm" value="Find" /> </form> <h2>CHAPTER IX <span > The Mock Turtle's Story </span></h2> </div> <div > <div > <img src="/books/3/292/1/html/2/alice34a.gif" height="258" width="220" alt="" />So they went up to the Mock Turtle, who looked at them with large eyes full of tears, but said nothing.</div> <p lang="en">'You can't think how glad I am to see you again, you dear old thing!...</p> <p lang="fr">Alice était très heureuse de la trouver dans un trempe si plaisant, et pensé à elle-même que peut-être c'était seulement le poivre qui avait fait son si sauvage quand elles se sont réunies dans la cuisine.</p> </div> </body></html>
2.
<p lang="fr">...</p>
Set up your tag in the HTML with the language attributes as needed. If the indicated selector has its language attribute equal to the same value you indicated in parentheses in Step 1, the style will be applied.
Tips
You can actually use any string as the language letter code, as long as it matches the value in the HTML. However, the W3C recommends using the codes from RFC 3066 or its successor. For a list of the current codes, check out: evertype.com/standards/iso639/iana-lang-assignments.html
xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Working with Pseudo-classes | Link</title> <style type="text/css" media="screen"> body { font-size: 1.2em; font-family: Georgia, "Times New Roman", times, serif; color: #000000; background-color: #fff; margin: 8px; } #navigation { width: 240px; margin: 0px 8px 8px 0px; border: 3px solid #ccc; float: left; } a { display: block; font-size: larger; padding: 2px 4px; text-decoration: none; border-bottom: 1px solid #ccc; font: small Arial, Helvetica, sans-serif; } 
Tips
