Computer Hope

Internet & Networking => Web design => Topic started by: mettlsa on November 25, 2004, 05:16:38 AM

Title: different colored links on same page
Post by: mettlsa on November 25, 2004, 05:16:38 AM

I am building a webpage for a church and I want different colored links on the page....so - the links in the menu will be white and the links on the main part of the page will be black.  This seems so simple and I cannot figure out what I am doing wrong.  

I am using style sheets...

Thanks!

Title: Re: different colored links on same page
Post by: QBMan on November 26, 2004, 07:19:07 AM

Well...That was once my problem.  Just using <font=.....</font> should do the trick if you put it aroun the different colored links.  It always worked for me... 8)

Title: Re: different colored links on same page
Post by: Corrosive on November 27, 2004, 09:44:43 AM

It's not an effect I'd recommend from a usability perspective: most people expect links to be of a consistent colour and form. But seeing as your using stylesheets, unlike most other folk here, I'll let you off the hook on that one.

CSS comes with a very handy feature known as Classes. These allow you to create a seperate style from the one you (probably) defined as the default style.

For instance, I've used this in various places. In this case, every link has an underline, whereas the links in the navigation bar do not:

Code: [Select]


a {
  color: #000000;
  background-color: #ffffff;
  text-decoration: underline;
}

a.nav {
  color: #000000;
  background-color: #ffffff;
  text-decoration: none;
}


Now you're probably wondering how on earth the broswer know which one to use. Simple, you need to add one extra thing to the link code in the HTML:

Code: [Select]

<a href="index.html" class="nav">

That last attribute tells the browser to use the "nav" class, instead of the normal link styles.

Webmonkey has some excellent tutorials, including ones to do with CSS. http://www.webmonkey.com

Title: Re: different colored links on same page
Post by: canbara on November 29, 2004, 01:54:55 AM

Thanks so much! Your explaination was very clear.  I ended up just using a style tag inside the <a> on the page, but I hate to do this as creating classes is so much easier.  I will change it to follow the pattern you suggested.

As far as usability, I just don't want to use images for the menu - too much of a pain to keep creating until I have the menu text nailed down.

Thanks again for your help!