Using class to overide body CSS definition 1

[southbeach]

In my external CSS file I have

body,td,th {
	color: #FFF;
}
body {
	background-color: #25241e;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	font-family: 'Arial';
	font-size:90%;
}
.datarow0 {
	color: #000;
	cursor: default;
}
.datarow1 {
	color: #FFF;
	background-color: #333;
}
.dataheading
{
	font-size: small;
	font-weight: bolder;
	text-transform: uppercase;
	background-color:#666666;
}

The HTML looks like this

<table class="datagrid" boder="0">
<tr class="dataheading">
  <td>Name</td>
  <td>Phone</td>
</tr>
<tr class="datarow0">
  <td>John Smith</td>
  <td>(555) 111-2222</td>
</tr>
<tr class="datarow1">
  <td>Larry Smith</td>
  <td>(555) 222-3333</td>
</tr>
</table>

My HTML uses class="datarow0" and class="datarow1" to alternate color properties between rows. I get the right background color but not the text; the text remains white.

It is obvious that the text color property is that which I've set on the body tag definition. I thought that this could be overwritten if I used classes ... The text color is what ever I set the body tag to.

Why is this and how can I fix it?

Thank you all for your assistance!


--
SouthBeach

http://www.fpgroups.com

The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

 

[Vragabond]

Table rows (tr) have no text inside, they only hold table cells (td). In your cells, you define the white color and you never change that. You need to specifically address the font color of cells (td), not just rows (tr).

.datarow0 td {
    color: #000;
    cursor: default;
}
.datarow1 td {
    color: #FFF;
    background-color: #333;
}

In addition to that, I would suggest you look into semantic elements such as thead and th for your column headers rather than using arbitrary classes.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[southbeach]

I was thinking of it as an inherited property, if set at the row level, everything there in will inherit it (unless otherwise set). Just like what I was observing with inheriting what the body tag was set to.

Oh, this fixed it - Thanks!



--
SouthBeach

http://www.fpgroups.com

The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

 

[Vragabond]

You were thinking correctly, however, you were explicitly setting it higher up in the code. Inherited values cannot overwrite explicitly set values:

body,[!]td[/!],th {
    color: #FFF;
}

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[southbeach]

Very valuable information ...

Thank you!

--
SouthBeach

http://www.fpgroups.com

The good thing about not knowing is the opportunity to learn - Yours truly, 2008.