i am generated an html file with many different links and they (by default) all show up the regular blue color. Is there anyway i can make certain links different colors. note that this html is getting pushed into outlook as an email so i can't have separate css files.
+1
A:
There are a couple different ways. CSS can appear in your head tag, so it doesn't have to be a separate style sheet.
One is to use the style attribute:
<a style="color:blue;">...</a>
Another is to use css classes:
<style>
.navLink { color: blue; }
</style>
<a class="navLink">...</a>
There are lots of options. See http://www.echoecho.com/csslinks.htm
Chris Lively
2009-11-16 16:47:02
Naming a CSS class "blueLink" is an awful thing to teach someone new to CSS classes. Start him off with the right habits: class names which related to the content, not the style.
Welbog
2009-11-16 16:51:53
@Welbog: You're right, I was in a hurry. Updated.
Chris Lively
2009-11-16 19:39:27
+1
A:
use a css style for the anchor inline:
<a href="foo" style="color:orange"....
David in Dakota
2009-11-16 16:47:05
+3
A:
You can put your css in the <head/> of the <html>. Style your links with the color(s) you want. If you need more than one type of link, use classes. e.g.
a { color: #abcde1}
a.visited, a.hover {color: #1abcde;}
a.special {color:#123456;}
dnagirl
2009-11-16 16:47:29
A:
You can use classes for your styles:
your CSS file:
.redlinks a
{
color: #FF0000;
}
.greenlinks a
{
color: #00FF00;
}
your HTML file:
<div class="redlinks"><a href="#">my link</a></div>
jonaspp
2009-11-16 16:48:18
Same with Chris Lively's answer, these are terrible CSS class names. The last thing we need is more people learning bad CSS habits.
Welbog
2009-11-16 16:52:34
A:
you could use internal style sheet or inline styles assuming the email client doesn't ignore them. of course by messing with link colours you run the risk of users not realising that you have links at all, so be careful.
jk
2009-11-16 16:51:50
A:
This is example use of different colours for links:
<style type="text/css">
a.yellowLink { color:#ff0; }
a.greenLink { color:#0f0; }
a.redBlueLink { color:#f00; }
a.redBlueLink:hover { color:#00f; }
</style>
<a href="http://www.google.com/" class="yellowLink">I’m yellow</a>
<a href="http://www.google.com/" class="greenLink">I’m green</a>
<a href="http://www.google.com/" class="redBlueLink">I’m red and blue on hover</a>
rochal
2009-11-16 17:06:40