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 info@westciv.com.

style master css tutorial

Styling links

In this section you will learn

  • the selectors for the four different link states
  • how to set your own color and background colors for links and override the default browser settings
  • how to remove the default underlining applied to links in most browsers
  • how to draw a line through a link so users will know they have already visited its destination

Project goals

  • To style the links so that they are in keeping with the design language of the rest of the page.

<< 7. class selectors | 9. page layout >>

The link selectors

Links can have four different states.

We can create rules that apply to links in any of these states. These statements are very similar to those we have already seen, the only difference being the kind of selector.

The form of this selector is a:state, where a, you'll remember is the name of the actual link element. So you have

You'll have noticed some links in the text on the page we're styling. At the moment they'll probably be underlined and colored electric blue, because this is most browsers' default for styling linked text. Now, accessibility purists say that you shouldn't mess with this because it is such a widely accepted cue telling users that this is a link. Changing it can cause confusion, with users perhaps not even realising this is linked text anymore. You can choose to follow this policy, but because styling links so that they fit in with the color scheme and design language of a site is such a widespread practice, it would be remiss of me not to tell you how to do it here.

Exercise 26

Create four new statements so you're ready to give different styles to the different link states. You'll see the selectors you'll need to use for these statements above.

Yet again, you've been spared this one - you should be able to find the four selectors for the link states already in your style sheet. When you want to create these yourself in the future, Style Master actually lets you do this in a single stroke.

To create four statements for the four different link states.

1. in the Statement menu, select New and then, near the bottom of the submenu All Link States

You'll see that this time four new statements have been added to your style sheet.

Here's what the new statements should look like.

a:link {

}

a:visited {

}

a:hover {

}

a:active {

}

Customizing link appearance

That's the hard part done. The rest, as they say, writes itself. Well, it does in this particular situation where someone has done all the design work for you and you know exactly which colors you are going to use. If you were building this page all by yourself you'd need to sit down and work out the colors using images and other design elements from the page. Using a CSS Editor with a Color Picker, like Style Master, makes choosing color combinations like this a lot more fun.

Exercise 27

  • give links in both their normal and visited state a background-color of 95b7cd and make their text color the same as the regular text on the page
  • give links in their hover state a background-color of aaddee
  • give links in their active state a background-color of 3cc7f0

The two colors for link/visited and hover that I've specified are actually the two colors from the page background image. You can just transcribe as you have done so far directly into the background-color editor, or you might like to take this opportunity to use the Color Picker to pick up colors from the preview.

To pick up onscreen colors using the Color Picker

1. Click and hold the Eyedropper button Eyedropper Button on the right of the background-color editor.

2. Move it around the screen until the color preview box shows the color you want to use, then release.

Doing this, you can pick up colors from anywhere onscreen in windows from any application. This will save you a lot of time when designing color schemes based on images.

Got all that? Here's what the link statements should look like when you're done.

a:link {

color: #666666;

background-color: #95b7cd;

}

a:visited {

color: #666666;

background-color: #95b7cd;

}

a:hover {

background-color: #aaddee;

}

a:active {

background-color: #3cc7f0;

}

Preview: remember to roll over and click the links to see the effect of the hover and active states. Now here's a couple of other little things you might want to do.

Most browsers have a default setting for links, which is to underline them. But if you want to change this it's very easy to do using the text-decoration property we saw previously. Go back to where I showed you the values available for this property and see if you can work out which one to use to stop this default underlining. If you're using Style Master you don't have to go back and find all the values - you'll see them all there in the editor. Just apply this to links in their normal state.

Exercise 28

Remove the underlining from links in their normal state.

Did you work it out? That's right, you should have set text-decoration to none.

a:link {

...

text-decoration: none;

}

Now, so far the properties for a:link and a:visited are exactly the same, so there's no way a user can tell whether a link is to a page they have recently viewed or not. Remember that the browser default here is for visited links to have a sort of purple color - but we've over-ridden this by specifying a color that fits in with the rest of our site. Lots of people, myself included, often break the rules a little bit and leave it like that. However, it's also common to draw a line through the text of visited links, so I'll show you how to do that as well. Actually, I don't even really need to show you how to do this. You use one of the values for the text-decoration property: can you work out which one?

Exercise 29

Draw a line through links in the visited state.

How'd you go? Pretty simple really, but just in case, here's what it should look like now.

a:visited {

...

text-decoration: line-through;

}

Does it work? The links on the page go to various parts of the Westciv site. Follow a few of them and come back and you should notice the line through effect appear.

Next

If you were new to style sheets you're probably thinking that we've already covered a lot of territory. The good news is that at this stage you've got the basics of style sheets in the bag. You know how to create a style sheet and link it to your page, you know what a statement looks like, and you know some basic selectors and properties. At this stage you might feel ready to go off and do a bit of experimenting on your own, and just get used to the CSS environment, then come back later and tackle what's coming up next.

So far we haven't seen much about the page layout features of style sheets. That's what we're going to do next.

<< 7. class selectors | 9. page layout >>

Style Master CSS Editor

Web Directions Conference