different color text

[chris9902]

i want to make different parts of my site to have different colored links, how do i do that?

i think i add class or something

[pyro]

Yes, you will need to use a class. Add this to the head of your document (or to your existing stylesheet definitions):

<style type="text/css">
a {
color: gray;
text-decoration: none;
}
</style>

and then your link will look like this:

<a href="http://www.w3c.org" class="links">Link One</a>

[nkaisare]

Or you may use CSS selectors
<div id="contents">
<p>The other day, I was visiting this incredible site on
<acronym title="Cascading Style Sheets">CSS</acronym>-based
design - <a href="http://www.csszengarden.com">CSS
Zen Garden</a>.</p>
...
</div>

<div id="navigation">
<ul>
<li><a href="link1.html">Link 1</a></li>
...
</ul>
</div>

[css]
div#contents a {color: #00f}
div#navigation a {color: #090}
Every <a> that is a descendant of <div id="contents"> will be displayed blue (#00f)
Every <a> that is a descendant of <div id="navigation"> will be displayed green (#090)

[chris9902]

ok:)


this is my CSS code


body {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: 000000;}

td {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: 000000;}

a {Arial, Helvetica, sans-serif; font-size: 12px; color: F5732A; text-decoration: none;}

a:visited {Arial, Helvetica, sans-serif; font-size: 12px; color: F5732A; text-decoration: none;}

a:hover {Arial, Helvetica, sans-serif; font-size: 12px; color: F5732A; text-decoration: none;}


if i do something like this;

<td class="test"> or <td id="test">

how do i add that to my css

[Charles]

You would use td.test or td#test as your selector in the stylesheet. But if you are trying to distinguish headings in your TABLE then you should be using the TH element. And note, that your color values each need to have a "#" prepended.

[chris9902]

so do i add class="test" or id="test"

[Charles]

If you've got one of them then use "id" and if you've got more than that then use "class".

[chris9902]

so i add

<td class="test"> blah blah blah </td>

then in my .css file i add



td#test {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: 00DD00;}

i think that is right if not stop me but if i was to make the links in the class test say blue how do i do that

something like

td#test a.

???

[couchmonkey]

If you used the html:
<td class="test"> blah blah blah </td>

then the corresponding css should look like:
td.test { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: 00DD00; }

You would use this in a case where you have many different <td> elements that all have to have the same properties specified by td.test...


If you have the html:
<td id="test"> blah blah blah </td>

then the corresponding css should look something like what you wrote:
td#test {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: 00DD00;}
(I'm not that familiar with selectors, so I don't know if this code is 100% correct)

You would use this in the case where only one <td> element on your whole page needs to have the properties specified in td#test.


I find classes are usually more useful, but now that I think about it, I might be able to shorten my css files if I used selectors in some places.