How to Customize Links with CSS

In general, browsers display links as blue underlined text. Originally, this default behavior minimized the confusion between content on the page and an interactive link. Today, almost every website styles links in its own way. Some websites don’t underline links; others retain the underlining but style links in colors other than blue; and so on.

The HTML anchor element (a) is used to create links. The text between the opening and closing anchor tag is the link description, and the URL set in the href attribute is the address the browser visits when the link is clicked.

The anchor tag has evolved over time and today has four states:

• link: A link that a user hasn’t clicked or visited
• visited: A link that a user has clicked or visited
• hover: A link that the user hovers the mouse cursor over without clicking
• active: A link the user has begun to click but hasn’t yet released the mouse button

CSS can style each of these four states, most often by using these properties and values. The following example styles links in a way that’s similar to the way they’re styled in articles at Wikipedia, where links appear blue by default, underlined on mouse hover, and orange when active. As shown below, the first link to Chief Technology Officer of the United States appears underlined as it would if a mouse was hovering over it. Also, the link to Google appears orange as it would if active and the mouse were clicking it.

a:link{

color: rgb(6,69,173);

text-decoration: none;

}

a:visited {

color: rgb(11,0,128)

}

a:hover {

text-decoration: underline

}

a:active {

color: rgb(250,167,0)

}

Remember to include the colon between the a selector and the link state.

Although explaining why is beyond the scope of this book, CSS specifications insist that you define the various link states in the order shown here — link, visited, hover, and then active. However, it is acceptable to not define a link state, as long as this order is preserved.

The various link states are known as pseudo-class selectors. Pseudo-class selectors add a keyword to CSS selectors and allow you to style a special state of the selected element.