« Q & A page
« tech pages
|
Q: Text effects with Cascading Style Sheets
by Mike Slocombe
Q: Here's the effect I'm trying to
achieve: On the left of my page, textual navigation with these
properties: underline only appears when the mouse hovers over the link,
or the link is active. There is no difference in appearance between
visited and non-visited links. On the right, the body text, in which
links are always underlined, and visited links change colour. I've
sweated over this for hours, and achieved a curious variety of results,
but can't get it to look the way I want it. Am I expecting too much of
CSS1, or am I missing something?
David Allison
A: Style sheets can appear a bit fiddly at first, but with a bit of patience things soon become clear!
You can get the effect you want by creating individual classes for the different links in your style sheets and then referring to them in the <A HREF=""> tag on your page:
<html>
<head>
<title></title>
<style type="text/css">
/* left hand links */
A.test {
color : black;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
font-size : 11px;
}
A.test:active {
color : red;
text-decoration : underline;
}
A.test:visited {
color : black;
text-decoration : none;
}
A.test:hover {
color : green;
text-decoration : underline;
}
/* body links */
A.test2 {
color : blue;
font-size : 14px;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-decoration : underline;
}
A.test2:active {
color : red;
text-decoration : underline;
}
A.test2:visited {
color : Gray;
text-decoration : underline;
}
A.test2:hover {
color : green;
text-decoration : underline;
}
</style>
</head>
<body>
<a href="test.html" class="test">left hand links</a>
<a href="test.html" class="test2">body links</a>
</body>
</html>
Bear in mind that the 'hover' effect only works in Netscape 6/IE5+ and that there can be all manner of annoying discrepancies between browsers - test carefully first!
Any old text editor will do for building style sheets but serious users might want to check out the fabulous TopStyle (PC only) or look up the list of editors and validators at http://www.w3.org/Style/CSS/
There's some useful on line tutorials available for learning CSS including
Guide to Cascading Style Sheets,
CSS tutorial and w3c Style Sheet Guide
May 2004
|
