A Smarter Way To Learn HTML & CSS(2015)

33
Styling links

By default browsers style link text in blue with an underline. But you can give it a different style. You can specify a different font-family, font-size, font-weight, color, and other font characteristics.

You can even lose the underline if you like. But be careful. Users have been conditioned to associate the underline with links. If there’s no underline, they’ll have a harder time identifying text as something they can click. Conversely, it’s a bad idea to underline non-linking text for emphasis. Some users will try to click on it. For emphasis, it’s better to put non-linking text in italics or bold.

This CSS code colors all your links goldenrod.

a {
color: #b8860b;
}

You can make links change their appearance when the user hovers the mouse over them. This code bolds them and removes the underline when the user hovers. (Removing the underline on hover isn’t a problem, because the user has already identified it as a link.)

a:hover {
font-weight: bold;
text-decoration: none;
}

In the code above, text-decoration: none removes the underline.

It’s not a good idea to underline nonlinking text since it may confuse the reader by signalling that the text is clickable, but you can underline text if you choose to, by specifying text-decoration: underline.

You can change the appearance of links at the moment the user clicks. This code increases

a:active {
font-size: 1.25em;
}

You can change the appearance of links that the user has already clicked. This code changes their color.

a:visited {
color: deeppink;
}

In your CSS file code links grey and links that are hovered on orange. Save the file. Display the page. Check the links. Hover over one and see what happens.

Sample CSS code is at:
http://asmarterwaytolearn.com/htmlcss/practice-33-1.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/33.html