how to: color text and text-background ?

[vmars316]

I have a page of 100 links, that looks like this:<br>[~Most-Used]<a href="www.hotmail.com/?">hotmail.com</a><br>[~Most-Used]<a href="http://alternativeto.net/">AlternativeToSoftwares</a><br>[~Most-Used]<a href="http://jsdo.it/vmars316/asdf/edit">jsdo.it javascript</a><br>[~Most-Used]<a href="http://www.portablefreeware.com/?">portablefreeware.com/</a><br>[Arduino]<a href="http://arduino.cc/forum/index.php#2">~arduino.cc/forum</a><br>[Arduino]<a href="http://arduino.cc/playground/">~arduino.cc/playground</a> And I want to color text and text-background different colors: [~Most-Used] text = black, text-background = blue >hotmail.com</a> text = red, text-background = lightGreen I suppose <span> would work. Or could i use "<br>[" and '">' as style tags ? Is there a better way than span ? Thanks

[newseed]

Just wrap a div around the set of links you have like this: <div class="mylinks"><br>[~Most-Used]<a href="www.hotmail.com/?">hotmail.com</a>< br>[~Most-Used]<a href="http://alternativeto.net/">AlternativeToSoftwares</a>< br>[~Most-Used]<a href="http://jsdo.it/vmars316/asdf/edit">jsdo.it javascript</a>< br>[~Most-Used]<a href="http://www.portablefreeware.com/?">portablefreeware.com/</a><br>[Arduino]<a href="http://arduino.cc/forum/index.php#2">~arduino.cc/forum</a>< br>[Arduino]<a href="http://arduino.cc/playground/">~arduino.cc/playground</a></div> Now the CSS: div#mylinks {background: blue;}div#mylinks a {background: lightgreen;} Adjust to suit.

[MarkT]

Or simply,create an a class in your CSS. a:link{color: #colourcode;background-color: #Colourcode;}a:hover {color: #colourcode;background-color: #Colourcode;}a:active{color: #colourcode;background-color: #Colourcode;}a:visited{color: #colourcode;background-color: #Colourcode;}

[vmars316]

edit in process:

Edited June 7, 2013 by vmars316

[vmars316]

newseed,I couldn't get the following to work.

[/size]<style type="text/css">div#mylinks {background-color: blue;}div#mylinks a {background-color: lightgreen;}</style></head>...............<div class="mylinks">..............</div class="mylinks"> 

Above, what am I doing wrong ?The following works but is painfully verbose:

[/size]<br><span style="color:#E7A97E; font-weight:bold; background-color:#726B50">[~Most-Used] </span><a href="http://www.quickerthanaspark.com/BenghaziGame/BenghaziGame.html"><span style="color:#FFFFFF; background-color:#645E46  ">Benghazi Game Intro</span></a> <br><span style="color:#E7A97E; font-weight:bold; background-color:#726B50">[Arduino] </span><a href="http://www.manning-sandbox.com/forum.jspa?forumID=788&start=0"><span style="color:#FFFFFF; background-color:#645E46  ">~Arduino in Action Forum</span></a> 

Pls note, that the textColors and background-color are diff for Category([~Most-Used] and [Arduino]) and aLinks. Thanks

Edited June 7, 2013 by vmars316

[dsonesuk]

This below

div#mylinks {background: blue;}div#mylinks a {background: lightgreen;}

Should be

div.mylinks {background: blue;}div.mylinks a {background: lightgreen;}

'#' = id ref'.' = class ref

[newseed]

OOPS! My bad! It should have been a period instead of a pound sign: div.mylinks {background-color: blue;}div.mylinks a {background-color: lightgreen;}

[dsonesuk]

Where i come from a pound sign is '£', hash (not smoking kind i might add) is the '#'.

[vmars316]

Thanks Folks, here is the current code : <style type="text/css">.catg {style="border: 1px; border-style:solid; border-color:#BB96A8; background-color:#CCC2B6; color:#FFFFFF; font-size: 12pt; font-weight:bold;"} .desc {style="border: 1px; border-style:solid; border-color:#BB96A8; background-color:#CCC2B6; color:#FFFFFF; font-size: 14pt; font-weight: bold;"} a:link{color: #FFFFFF;} a:hover {color: #FFFFFF;} a:active{color: #FFFFFF;} a:visited{color: #FFFFFF;}</style> <table><!-- style="color:#F1E9DC;">[~Most-Used] --><tr><td class="catg">[~Most-Used]</td><td class="desc"><a href="http://alternativeto.net/">AlternativeTo Software</a></td></tr> <tr><td class="catg">[~Most-Used]</td><td class="desc"><a href="http://www.quickerthanaspark.com/BenghaziGame/BenghaziGame.html">Benghazi Game Intro</a></td></tr></td></tr> <tr><td class="catg">[~Most-Used]</td><td class="desc"><a href="http://www.hotmail.com/?">hotmail.com</a></td></tr> <tr><td class="catg">[~Most-Used]</td><td class="desc"><a href="http://jsdo.it/vmars316/8D5g/edit">jsdo.it javascript</a></td></tr> <tr><td class="catg">[~Most-Used]</td><td class="desc"><a href="http://www.portablefreeware.com/?">portablefreeware.com/</a></td></tr>