Different hyperlink colours in different places

programming web dev
1

Hi,

I have a template set up through Dreamweaver, and one stylesheet for it.

Within the stylesheet I have this code for hyperlink colours and hover effects, etc:


a:link {
    color: #666666;
    text-decoration: none;
}
a:visited {
    color: #666666;
    text-decoration: none;
}
a:hover {
    color: #FF9900;
    text-decoration: underline;
}
a:active {
    color: #FF9900;
    text-decoration: underline;
}

It works fine… but I was wondering how I’d go about having several different types of hyperlink colours?

For instance I would use the previous CSS for hyperlinks within the textual content of the web site, but I would like the menu hyperlinks at the bottom of the page to be a different colour and have different hover/active/visited colours, because they are menu links to other pages of the website, where as the links within the textual content of the site (previously mentioned) may be links to other web sites.

I don’t know whether you can attach several CSS files to a site, or if you can do several link classes within a CSS file… I’ve only ever had the one set of hyperlink CSS so I haven’t had any issues before… Now is different though.

Any help is appreciated. :smiley:

P.S. The image attached isn’t the real site (it’s not that ugly. lol). Just an example of what I mean.

2

To do this just make a seperate class for your links. This should get you started:

Example HTML:


<a href="#">normal orange link</a>
<a href="#" [COLOR="Red"]class="green"[/COLOR]>special green link</a>

Example CSS:


a:link,
a:visited {
  color: #666;
  text-decoration: none;
}

a:hover,
a:active {
  color: #f90;
  text-decoration: underline;
}

a[COLOR="Red"].green[/COLOR]:link,
a[COLOR="Red"].green[/COLOR]:visited {
  color: #060;
}

a[COLOR="Red"].green[/COLOR]:hover,
a[COLOR="Red"].green[/COLOR]:active {
  color: #0c0;
}

Side note, be sure to put the classes below the global styles so you don’t overwrite your own styles. Anyways, hope this gets you in the right direction! :thumb2:

3

Thanks! :smiley: