Wish to use the same table at all times but differant border colours

[cliftonbazaar]

Only new to css so please excuse if this is an easy question -

 

I am programming a game that displays your character on the right of the screen; I have set this up so it works fine in css.

 

I now wish to have all the borders set to a different colour depending on how healthy your character is, my css code is

TABLE.RightTable
{
  float:center;
  border-collapse:collapse;
  border:3px Solid Green;
  border-style:ridge;
}
TABLE.RightTable th {text-align:center; font-size:large; border:3px Solid Green; border-style:ridge;}
TABLE.RightTable td {font-size:normal; border:3px Solid Green; border-style:ridge;}

TABLE.RightTableBad
{
  float:center;
  border-collapse:collapse;
  border:3px Solid Red;
  border-style:ridge;
}
TABLE.RightTableBad th {text-align:center; font-size:large; border:3px Solid Red; border-style:ridge;}
TABLE.RightTableBad td {font-size:normal; border:3px Solid Red; border-style:ridge;}

 

As you can see the only difference is the colour of the border, is there a way of simplifying this code so I only have to call the css code once for all borders?  I would like to have more options (green if poisoned for example) but don't really wish to write out the css code again.

 

James

[jdavidbakr]

You can define multiple classes separated by a comma and then separately define any changes:

 

TABLE.RightTable,
TABLE.RightTableBad
{
  float:center;
  border-collapse:collapse;
  border:3px Solid Green;
  border-style:ridge;
}
TABLE.RightTable th,
TABLE.RightTableBad th
{text-align:center; font-size:large; border:3px Solid Green; border-style:ridge;}
TABLE.RightTable td,
TABLE.RightTableBad td
{font-size:normal; border:3px Solid Green; border-style:ridge;}

TABLE.RightTableBad
{
  border:3px Solid Red;
}
TABLE.RightTableBad th {border:3px Solid Red;}
TABLE.RightTableBad td {border:3px Solid Red;}

 

OR, make an additional class that just handles color.  You can apply multiple styles to an element, just separate them by a space:

 

<style>
  TABLE.RightTable { ... }
  .Bad td, Bad.th { border: 3px Solid Red; }
  ...
</style>
<table class="RightTable Bad">...</table>

[cliftonbazaar]

Jon,

 

Thanks very much for the answer, I have now fixed the code and it looks great

 

Jame