Use Class attribute in an External StylesSheet?

Question

I inherited a website that still uses tables and I am trying to spice it up as much as I am allowed without completely redoing the whole site.

I wanted to create a hover effect over all the images in the tables, but I am still inexperienced in coding. I was able to get the hover effect to work, but I feel that the way I achieved this was a bit too cumbersome. Please see a sample of my code below:

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="sample">
<tr>
<td><a href="imageurl.html"><img class="fade" src="imgs/img.jpg" width="170" height="170" border="0" /></a></td>
</tr>
<tr>
<td>Image Title</td>
</tr>
</table>   

I feel that there is an easier way to apply the "fade" class to the imgs contained within the tables without typing it in every single line. Can anyone tell me how to apply the "fade" class to ONLY the images within the tables on an external stylessheet? Is there something like below that can be added to an external stylesheet?

img {class: fade;}

Answer 1

table td img {}

This is target you will need to add style to the image in the table td.

You have added a class to the table class="sample" which is good.

You can target classes in css by adding the class to the style sheet

.sample td img

or you can target tables with the class

table.sample td img

or even more simple

.fade

You will have to add the class code to achieve the fade effect though

.fade{ 
     opacity:0.4;
     filter:alpha(opacity=40); /* For IE8 and earlier */ 
}