View Full Version : Forcing Link Colors

10-08-2004, 01:31 AM
I have a page that the CSS style sheet a:link color is set to #000000 But there are many text links on the page that I would like to be a different color than the standar links. How can I change certain links to be what ever color I want, while still having all other text links #000000?

10-08-2004, 01:41 AM
Please show us parts of your code that you want to be different.

10-08-2004, 01:46 AM
<A href="http://www.puc.edu/Albion/page2.html">Things
to Do</A><font color="#000000"> |</font> <A href="http://www.puc.edu/Albion/page3.html">Facilities</A><font color="#000000"> |</font> <A href="http://www.puc.edu/Albion/page4.html">Seminar
and Classes</A>

Here is the code, I just want to change the color of the names, such as "Things to Do"

10-08-2004, 02:03 AM
<a style="color:#f00">

10-08-2004, 07:56 PM
Will they all be different colors, or will there be multiple links sharing the same color?

It might be beneficial to use "classes". They are fairly easy to work with and are definetely the way to go if you want to assign custom styling to a few specific elements.


<a href="#" class="myClass">Link here</a>

a.myClass:link { color:#f00 }

10-11-2004, 08:28 PM
That works great, thanks so much!

Roy Sinclair
10-11-2004, 09:10 PM
The next step beyond using classes is to code your CSS to your page layout. For instance if you want links in the main content section of your page to be a certain color but links in the navigation area to have a different color you can do it using classes or by content.

For example:

<div id="maincontent>...<a href="someplace">Some place</a>...</div>
<div id="navigation">...<a href="anotherpagehere">Another Page Here</a>...</div>

You can still style those links differently because the containing DIV tags provide the base information needed for styling via CSS:

#maincontent a:link { color: #f00; }
#navigation a:link { color: #00f; }

See the rule "#maincontent a:link" specifies that all "a" tags inside the element with the id of "maincontent" will be red while the similar rule for the id "navigation" specifies that links inside that element will be blue. This is an important thing to learn since it provides you with a way to avoid using classes when they are aren't needed and can make your html code even simpler which also makes it easier to maintain since you no longer have to worry about which "classes" should apply to a link. Instead the CSS rules which apply to a link are controlled by what are of the page the link will be found.

IMO (In My Opinion), until you've understood this and started to use it you really haven't started to learn the real power of what CSS can do for you.