CSS - IDs and Classes

[ollyno1uk]

I am relatively new to CSS and I am struggling with something that I don't fully understand.

The difference, as I understood, between calsses and IDs were that IDs were only meant for one use wheras classes are used as many times as required?

I have an oscommerce based store and I was tryng to validate the html. I noticed a lot of errors were from using an ID in more than one instance.

It was for a link within a table cell - the html looked like this

<td class="product-heading" id="link>some link here</td>

THe class provided the background image for the cell and the id colored the link within the cell and made it bold text.

in my css I had:

td.product-heading{
background: (url blah blah);
}
#link a{
color: some color:
font-weight: bold;
}

So being that I assumed ids were similar to classes I added

 
a.product-heading{
color: some color:
font-weight: bold;
}

Then removed the id reference. Nothing changed.

I then thought perhaps I needed to add the class specifically within the link tag rather than just in the table tag. I tried this and still no change.

nothing I tried seemed to make any difference but as soon as I added the link id back into the table cell everything worked.

Whilst I am not worried about the validation so much, I am worried that I do not understand something fundemantal here about CSS and classes and IDs

Thanks in advance to anyone that can help.

(I am using 4.01 transitional as a doctype BTW)

[simonuk]

You are absolutely spot on with ID's and classes. You can only have one ID per page but it doesn't just mean DIVs. list items, input fields and so can also only have one instance.

When you validate the page it should give you the line numbers which are conflicting.

The "HTML Validator" for Firefox is another great add-on that quickly shows you what the problems are and where. This is also good because it will check offline and locally as well as online.

[ollyno1uk]

Thanks and yes I see the line numbers but as stated above, changing them to classes does not give the text changes that I was expecting. For example the links are green in color. Workds with the ID but changing to classes as I did above the links remain black as per the rest of the page.

Thanks

[simonuk]

Sorry I didn't realise you were talking about text colours.

In your example the text wasn't in an "a" tag so styling the "a" tag wouldn't have done anything. Also there are some overriding issues with your code. The rules are like this:

a {color:red} would set the default for the site.

#divname a or .classname a would override the above.

#divname.classname a would override the above.

In your case if you had a properly implemented "a" tag you would add the color to
.product-heading a
and not set the "a" rule to an ID unless it is the only one and what you need to style was inside it.

If you just wanted text (but not links) to change then it's just:

.product-heading or td.product-heading

[ollyno1uk]

Hi and thanks again

To claify here is the code

<td class="product-heading" id="link><a href"some link here">anchor here</a></td>

It is the anchor text that I want to change the color of - with the ID curently in place it works fine though there are many instances of these on the page so I want to change to a class.

So to do this do I need to do

.classname a{color: #color;}

or

a.classname {color: #color;}

and does the class go in the link tag? As currently the id is in the table tag only but still the color change is reflected within the link that resides n the table.

I hope this is making sense.

[mattur]

.classname a {color: #color;}

applies to all <a>'s within the tag with that classname (notice the order):

<td class="classname"><a href="#">link</a></td>
...and...
<div class="classname">*moreHTMLcode*<a href="#">link</a>*moreHTMLcode*</div>
...etc...

a.classname {color: #color;}

(notice the order) only applies to:

<a class="classname" href="#">link</a>

So as simonuk posted above, you can change your html to:

<td class="product-heading"><a href="some link here">anchor here</a></td> 

and your CSS to:

td.product-heading{
background: (url blah blah);
}
td.product-heading a{
color: some color;
font-weight: bold;
}

If each row of your table is the same, eg:

<table>
<td class="product-heading" id="link">some link here</td>
<td class="product-heading" id="link">some link here</td>
<td class="product-heading" id="link">some link here</td>
<td class="product-heading" id="link">some link here</td>
...etc...
</table>

You could go up a level and just apply a class (or an id, if it's unique) to the table:

<table class="MyClassName">
<td>some link here</td>
<td>some link here</td>
<td>some link here</td>
<td>some link here</td>
...etc...
</table>

table.MyClassName td{
background: (url blah blah);
}
table.MyClassName a{
color: some color;
font-weight: bold;
}

In addition to Simon's excellent advice to install the HTML validator extension, also install "Firebug" for Firefox. This allows you to inspect a tag and see the CSS rules that apply to it. Highly recommended.

[simonuk]

I could never live without firebug!

Debugging in the old days: half a day - with firebug half an hour :-)

[ollyno1uk]

Well thanks to both of you - this has really helped my understanding. I will try and apply these changes shortly.

All the best