Westciv Logo

These materials are copyright Western Civilisation Pty Ltd.

www.westciv.com

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 [email protected].

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

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:

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

So, go through and do this to all the links you want to give that class to, and then you're ready to go back to your style sheet.

In your style sheet

All you have to do now is create a selector that will select links of class "handbook", continuing with my example, and apply some properties to that selector.

The selector that will select all links of class "handbook" looks like this

a.handbook

And if you wanted to make all the links to handbook

Then your style sheet will look like this

a.handbook {background-color: #510fde;

color: #17c707;

text-decoration: none}

And once you have saved this style sheet and linked it to your HTML document, all those links you marked up as class "handbook" will look 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.