css 101


A common requirement is have full control over the appearance of links on a page. You may want your links bolded rather than underlined, or to appear in a different color. You want to control how a link appears when the mouse is hovering over it, or you may want links on different sections of a page to appear in different colors.

In HTML, a link is represented by the "anchor" tag, represented as <a>, with an attribute of href. Therefore, a rule to style links simply uses "a" as a selector. Here we'll make our links green, bold, and turn off underlining.

This is a link test.

Instead of "none" you can also use any of "overline," "line-through," "underline," or "blink" (for lord's sake, please don't use blink!). Actually, these are general text properties, not just link properties -- we just happen to be decorating the text that appears within links here.

But that doesn't take us far enough. At the least, you want to style links differently depending on whether the user has or has not visited them before. But there is no HTML in the document you can use to determine whether a user has visited a link before -- you're trying to detect a condition that only exists in the web browser, not something in the HTML itself. CSS accommodates this through something called "pseudo selectors," which you see separated by colons in the code below (:visited, :hover).

Notice also that we don't have to specify the font-weight and text-decoration for the two pseudo states. Since we specified those properties for the basic a selector, they apply to all links, regardless of state, unless you specifically override them.

This links to Google (which you've visited) whereas this links to an unvisited page.
Roll mouse over links to see :hover effect.

To see how to set link styles/colors differently on different sections of a page, see the end of the Refining Selectors section of this tutorial.