displying td bgcolor in a css

[chelvis]

I have a .css like the following:

.Blck {font-size: 10pt; font-family:arial,verdana,geneva; color:#000000;}
.SBlck {font-size: 8pt; font-family:arial,verdana,geneva; color:#000000;}
.MBlck {font-size: 9pt; font-family:arial,verdana,geneva; color:#000000;}
.SGrey {font-size: 9pt; font-family:arial,verdana,geneva; color:#333333;}

I call this .css in my html for font colors of text. I have 3 tables where I defined the bg colors for the <table> tag and also <td> tags.

<table bgcolor="#3173B5">
<tr><td>test1</td</tr>
</table>

2nd table:
<table border="0">
<tr><td bgcolor="#CFFFFF">First Name</td></tr>
<tr><td bgcolor="#FFFFCC">Last Name</td></tr>
</table>

How can I define all these bgcolors in my .css so that I dont have to change them in multiple places in my html. I can just change in one .css. This is just part of the html I am displaying. Its actually very big.

[Roy Sinclair]

.Blck {font-size: 10pt; font-family:arial,verdana,geneva; color:#000000;}
.SBlck {font-size: 8pt; font-family:arial,verdana,geneva; color:#000000;}
.MBlck {font-size: 9pt; font-family:arial,verdana,geneva; color:#000000;}
.SGrey {font-size: 9pt; font-family:arial,verdana,geneva; color:#333333;}

.tblback { background-color:#3173B5; }
.tblcell1 { background-color:#CFFFFF; }
.tblcell2 { background-color:#FFFFCC; }

<table class="tblback">
<tr><td>test1</td</tr>
</table>

2nd table:
<table border="0">
<tr><td class="tblcell1">First Name</td></tr>
<tr><td class="tblcell2">Last Name</td></tr>
</table>


Of course you'd want to give the classes for the tables more meaningful names than I did in the example.

[privateer]

Hi Chelvis,

Here is one approach that will work with images or colors. The following shows an image implementation:

1. Create a style sheet with defined images:

.lionimg {backgroundImage: URL(/images/animals/lions/lion1.gif)}
.wolfimg {backgroundImage: URL(/images/animals/wolf/wolf1.gif)}
...

2. In your style specification on the html object add the class of the image you want to use:

<xxxxx class="class1 class2 lionimg" .....> where xxxx is your tag, say div,td,table,span etc.

3. You can now change the image (or color) via js on the client side or gen the image (or color) you want for the element on the server side.

There are a lot of options for you to choose from on the server side like generate the style sheet on the fly or select the element colors on the fly or both.

Hope this helps.
Regards

[chelvis]

Thanks, Instead of a background image, can we also use this just for an image? say I have a html like

<td><a href="some.html"><img src="images/tab.gif" border="0" height="10"></a>

Here then how do I speficy the height in the html if I use .css for an image? because some time I can change the height in html for the same image. Also then how about using an image as a link?

[redhead]

Originally posted by privateer
.lionimg {backgroundImage: URL(/images/animals/lions/lion1.gif)}
.wolfimg {backgroundImage: URL(/images/animals/wolf/wolf1.gif)}umms... that should be background-image methinks... :)

[pardicity3]

Originally posted by redhead
umms... that should be background-image methinks... :)

Heh, you thinks right redhead, and I think that our friend privateer has been using javascript with css a little too much lately.

[privateer]

Yes,

You are all correct. That will teach me to blow out a quick answer while I'm in the middle of writing code.

background-image:... for the style

<id>.style.backgroundImage = "url(" + <var that returns URL string>+ ")"; for JS attribute

Sorry gang.