Hyperlink Colours

[drmartin]

The default colour of hyperlinks is causing problems with my scheme.
Does hyperlinks have to be the same colour on one page?

Thanks.  :)

[wildteen88]

You can change the color of the links, just sprinkle a bit of CSS on to them to change the color of your links. You can give links seperate colors too if you give the link you want a different color a class. Then can use this CSS:
a.class {
  color: #RRBBGG or a color name
}


So if you want a link that has a class called className the links will be pink.
a.className {
  color: pink;
}

The html
[code]<a class="className" href="blah">Blah balah</a>[/code]

[Daniel0]

Or you can give them different attributes depending on where they are located. Say you have a div with the id 'nav'. Then you can style all links inside this way: [code]#id a {

}[/code]

[smashingred]

From a usability standpoint it is better that your links be all the same color and that they be underlined. It doesn't make sense to make the user look at every link and decide if what they are looking at is a link. Having more than one colored link on a page for unvisited links would be confusing. That in mind if the sections of the pages are defined clearly then certainly you can have different style links.

I don't recommend using the following as it is a pain to manage and remember:
[quote]The html

[code]<a class="className" href="blah">Blah balah</a>[/code]
[/quote]

I would make your links a particular colour depending on what area of the page they are in for instance if you have a page with code like this:
[code]
<div id="main_content">
    <p>This is some text surrounding a <a href="some_document.html">link</a> that, when clicked on, will go to some document</p>

</div>
<div id="side_bar">
    <p>This is a side_bar <a href="somewhere_else.html">link</a> and it will take you somewhere else.</p>
</div>
[/code]

You can control it using CSS like this:
[code]
#main_content a, #main_content a:link{
    color:pink;
    }
#main_content a:visited{
    color:orange;
    }
#main_content a:hover, #main_content a:focus{
    color:grey;
    }
#side_bar a, #side_bar a:link{
    color:yellow;
    } 
#side_bar a:visited{
    color:blue;
    }
#side_bar a:hover, #side_bar a:focus{
    color:green;
    }

[/code]

[b]This will yeild a page that ouputs the following:[/b]

This is some text surrounding a [color=pink][u]link[/u][/color] that, when clicked on, will go to some document.

This is a side_bar [color=yellow][u]link[/u][/color] and it will take you somewhere else.

By using contextual selectors instead of creating endless classes and placing them in each of your anchor elements you will be able to benfit from using the style sheet to change the attrbutes of all the pages that call the CSS file. This will also prevent classitis where you end up using classes to solve every problem for styling on pages. Using classes for exceptions or for adding meaning to the code is fine but don't just use them as a catchall to apply styles--it is almost as bad as using the style attribute in the page.

When building pages make sure that your templates have clearly defined sections and by doing so you will be able to use a few ID attributes and then the elements for most of your sites. Many websites have the following sections for which you could create ID's: Header, content section, sidebar or subcontent, footer, global navigation, secondary navigation. Regardless whether you are using tables or divs for layout you can name your sections using the IDs and control the elements that fall within those sections.

Hope this helps.

All the best,

Jay