• Choose a category
• All
• Classic-Fiction

By Root 1546 0

names and phone numbers are part of contacts. There’s no need to bring in artificial table elements if you can describe the data perfectly well without them.

If you still want to make the data look like a table, that’s completely possible, as shown in Figure 3-7. See Book III to see exactly how some of the styling code works. Of course, you’re welcome to look at the source code for this styled version (dubbed divSpanStyled.html on the CD-ROM) if you want a preview.

Figure 3-7: After you define the data, you can style it as a table if you want.

The point is this: After you define the data, you can control it as much as you want. Using span and div to define your data gives you far more control than tables and leaves your XHTML code much cleaner.

div and span aren’t simply a replacement for tables. They’re tools for organizing your page into segments based on meaning. After you have them in place, you can use CSS to apply all kinds of interesting styles to the segments.

Using Pseudo-Classes to Style Links

Now that you have some style going in your Web pages, you may be a bit concerned about how ugly links are. The default link styles are useful, but they may not fit with your color scheme.

Styling a standard link

Adding a style to a link is easy. After all, (the tag that defines links) is just an XHTML tag, and you can add a style to any tag. Here’s an example, where I make my links black with a yellow background:

a {

color: black;

background-color: yellow;

}

That works fine, but links are a little more complex than some other elements. Links actually have three states:

♦ Normal: This is the standard state. With no CSS added, most browsers display unvisited links as blue underlined text.

♦ Visited: This state is enabled when the user visits a link and returns to the current page. Most browsers use a purple underlined style to indicate that a link has been visited.

♦ Hover: The hover state is enabled when the user’s mouse is lingering over the element. Most browsers don’t use the hover state in their default settings.

If you apply a style to the tags in a page, the style is applied to all the states of all the anchors.

Styling the link states

You can apply a different style to each state, as illustrated by Figure 3-8. In this example, I make ordinary links black on a white background. A visited link is black on yellow; and, if the mouse is hovering over a link, the link is white with a black background.

Figure 3-8: Links can have three states: normal, visited, and hover.

Take a look at the code and see how it’s done:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Pseudo-classes and links

This link is normal

This link has been visited

The mouse is hovering over this link

Nothing is special about the links in the HTML part of the code. The links change their state dynamically while the user interacts with the page. The style sheet determines what happens in the various states. Here’s how you approach putting the code together:

1. Determine the ordinary link style first by making a style for the tag.

If you don’t define any other pseudo-classes, all links will follow the ordinary link style.

2. Make a style for visited links.

A link will use this style after that site is visited during the current browser session. The a:visited selector indicates links that have