They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses.

Please see our website for detailed copyright information or contact us info@westciv.com.

quick tutorials

Styling links

If you don't do anything special to a link in an HTML document, it's probably going to appear in a sort of electric blue color, with the text underlined. This appearance is decided by the browser, sometimes as modified in the preferences by the person using the browser, or by the authors use of the link properties in the BODY element. Generally, linked text is the same font and point size as other text in the paragraph, but it is underlined and in a different color. Often that color will change if the browser has visited the link before.

This might be just fine with you. But if that link appearance does not fit in with the design language of your page, you are going to be very interested in this recipe.

Read on if you want to

Define your own text color for links

Get rid of the underlining

Give links a background color

Give different appearances for different types of links, for example links to other parts of your site as opposed to links to pages outside your site

Define your own appearance for links depending for when they have been visited, when the mouse is over them, or even while they are being clicked

1. Basic Link Appearance

The first thing you might want to do is create some selectors in your style sheet that will select links in their various states: in order of appearance unvisited, visited, while the mouse is over them, and while being clicked

A:link

A:visited

A:hover

A:active

And then it's so simple. You just give some properties with some values to these various link states. Here's some ideas.

Define the color of the text

a:link {color: purple}

Just insert your own color value instead of "purple". But remember, while there are many different values and types of value you can use, you can't just write anything. See our CSS Guide for the color values you can use.

Get rid of the underlining

a:link {text-decoration: none}

You'll probably want to do this for all the other link states as described above as well.

Define a background color

a:link {background-color: lime}

Again, you'll need to do this for the other link states, possibly the same color, or maybe different for each. See our CSS Guide for the color values you can use.

Putting it all together

If you want unvisited links to be in purple text, on a lime background with no underlining, the code in your style sheet should look something like this.

a:link {color: purple; text-decoration: none; background-color: lime}

And the easy part is you don't have to do anything to your HTML document, except of course link the style sheet to it :-) Do this, and your links will look like this.

2. Different appearance for different types of links

It's nice to be able to show people when a link will take them to another part of your site, and when it will take them away from your site altogether. You might also want to distinguish between links that go to different places, e.g. the CSS Guide, as opposed to the hands-on CSS Tutorial.

To do this you have to give different classes to the different links in your HTML document, and define different properties for these class selectors in your style sheet. But don't worry, it's not as hard as it sounds.

In your HTML

Giving a class to a link is easy, and some more advanced HTML editors will largely automate the process once you have linked the style sheet (and one WYSIWYG editor, from a large company, who we won't mention here, will pretend to automate the process, but actually do it incorrectly and you'll think class selectors don't work. They do work! So if you've used an editor make sure the code it creates looks like that below.)

As you almost certainly know, regular links look like this:

<a href="http://www.westciv.com/handbook">CSS Handbook</a>

Now, let's say I wanted to give a special appearance to all the links that go to the CSS Handbook. All I have to do is give links to the Handbook a class of "handbook", like this:

Now, maybe you don't like this color combination, or maybe in 6 months time you change the whole look of your site. Changing how it looks is so easy because all you have to do is change those properties in the style sheet.

We can even combine the selectors for the different states we saw above (link, visited etc.) with classes. For example, to select only links of class handbook that are in the hover state, we use this selector

a.handbook:hover

Notice, it is a link of class handbook in the hover state, so the order is as above, with the :hover being added to the A.handbook, not the other way around.