Information Sheet
CSS Link Styles
Cascading Style Sheets (CSS) can be used to give all text throughout
a site, a specific appearance and behaviour. They are an excellent
way of ensuring consistent formatting throughout a site.
Whilst most people are aware of the ability to define different
properties for link styles, using the a:hover, a:visited attributes,
most are unaware that its possible to define different styles for
different types of links. This is useful should you wish to define
link styles for different classes of information on your site.
You can see an example of this on the Environment
Research pages, where links for the main navigation menu on
the left hand side are shown in black (indicating links within the
school site), and links on sub-menus on the right hand side are
shown in green (indicating links to pages on other sites). Note
that we use the same a:hover attribute for both styles of links.
Here's another rather lurid example:
Link Style 1
Link Style 2
To do this on your own site:
1) We're going to make a new style which we shall call lmenu.
2 ) Ensure that your style sheet has the default a:link, a:hover
type entries in it......
e.g.
a:link {
text-decoration: none;
color: #0000FF;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #FF6600;
}
a:active {
text-decoration: underline;
color: #FF6600;
}
3 ) Now to add the new link style, just make another set of entries
where the new classname is stated in between the a and the :link,
:hover etc. You'll also need to add a period. So a:link
will be the original style, and a.lemenu:link
is the new link style which we are calling lmenu.
Here's an example from the environment stylesheet, its also defining
a link style called lmenu.
a.lmenu:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: 11px;
font-weight: bold;
color: #000000;
text-decoration: none;
}
a.lmenu:visited {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
font-style: normal;
line-height: 11px;
font-weight: bold;
color: #000000;
text-decoration: none;
}
a.lmenu:hover {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
font-style: normal;
line-height: 11px;
font-weight: bold;
color: #FF6600;
text-decoration: underline;
}
4) To use the new style in your pages, just create a link and then
add a class="lmenu" into
the link
e.g. so from the environment site
<a href="courses/index.htm" class="lmenu">Courses</a>
<a href="research/index.htm" class="lmenu">Research</a>
Hey Presto. You have 2 styles you can use for links. In the example
above you can switch between the formatting settings you have created
simply by adding or removing class="lmenu"
from the link.
5) N.B. The new class doesn't have to be called lmenu, you can
call it anything you like as long as it doesn't conflict with any
other defined style. |
