How-to #4
Use the CSS pseudoselectors
Everyone will have seen (if they use Internet Explorer as their web
browser) the effect where passing the mouse over a text link - not a
graphic - causes the links to change colour, underlining, font weight,
or even font family. Although this can be overdone, it's quite effective
- but how do you do it?
Adding styles to link tags
Using a style sheet, you can set this up very easily. The object is
to modify the <A> anchor which denotes a hyperlink, and you set
up a style like this:
A {font-size: 10 pt; font-family: sans-serif; font-weight: bold;
color: #0000ff;}
This style should go in the <HEAD> section of the page, inside
a <SCRIPT> tag, or of course in an external style sheet. The above
style sets all your links to be in 10 point bold, blue, sans-serif text.
But what if you want some links to look different to others? For example,
links in a navigation bar at the bottom of the page might need to be
in a smaller font or different colour. No problem. Just add a CSS class
selector and use the new style in the link tag, so:
.demo {font-size: 8 pt; font-family: serif; font-weight: bold; color:
#00aa00;}
Your style sheet now contains two styles, one for <A> tags without
a style and one for <A> tags with the class 'demo'. In the HTML
code, use the style like this:
<A HREF="http://www.somewhere.net" CLASS="demo">Somewhere.net</A>
Now all your links will have the style attached to the <A> tag except those
where you specify the "demo" class.
CSS 'pseudoselectors'
So, those pseudoselectors. There are four of these, namely "link", "active", "visited" and "hover". "Link" refers
to the link before it is clicked, visited, or hovered over with the mouse
and corresponds to the basic <A> tag. "Active" is the
link which has just been clicked on before the browser navigates to the
page. "Visited" is fairly obvious. "Hover" is the
fun one. This is the link's appearance when the mouse hovers over the
link before it is clicked; when the mouse is moved away, the link will
revert to the "link" or "visited" style, depending
on whether that link has been visited before.
To apply these pseudoselectors, put a colon and then the pseudoselector
name after the anchor or, if you've used a class, after the class name:
A:link {font-size: 10 pt; font-family: sans-serif; font-weight:
normal; text-decoration: none; color: #0000ff;}
A:hover {font-size: 10 pt; font-family: sans
.demo:link {font-size: 10 pt; font-family: sans-serif; font-weight:
normal; text-decoration: none; color: #00aa00;}
.demo:hover {font-size: 12 pt; font-family: serif; font-weight:
bold; text-decoration: underline; color: #00ffff;}
(The "active" and "visited" links have been omitted
for clarity.) You can see that this will change the standard links on
the page from plain blue text to underlined yellow text when hovered
over, while the link with class "demo" will change from plain
green 10 pixel high sans-serif text to bold underlined cyan 12 pixel
serif text (ouch!) when hovered over. Just to prove this:
This is a standard link
This is a link using class "demo"
The catch
As always, there's a catch - well, two in fact. First, these pseudoselectors
don't work in Netscape Navigator, so you're designing for Internet Explorer
users. The second can have you tearing your hair out, and it's this.
Under certain circumstances - it doesn't appear to be a consistent error
- the "hover" and "active" pseudoselectors don't
work properly. What happens is that the link works fine, but you don't
see the change which is meant to occur on hovering over the link, or
possibly no change when the link is active. This appears to happen if
you define your styles so that the "visited" pseudoselector
comes after the "hover" or "active" pseudoselectors
in the style sheet. It doesn't always happen, but if your classes don't
work as expected, make sure that "active" and "hover" come
after "visited", and that may fix the problem.
Home
page
| Graphics | Web design | Links | Contact
Archive |
About Microbion |
Site map | Privacy
policy
|
