Hey all, simple question I'm sure, but I would like to have the body of a page be one color and to have the table in the center a separate color. I tried specifying body color and table color, but body always overrides it. I'm attempting this in css, and I have a feeling I need to use a "not" excluder to make this happen? Such as specifying body not:table or something along the lines of that. Absolute beginner here, so be easy on me. Thanks!
A:
Make sure your styles are actually being applied to your table tag. If your table does not change colors, then your CSS selector is likely wrong.
Here is a simple example of styles being applied to the body tag. The class bg is added to the table tag in the markup, so it will pick up the other colors.
See here: http://jsfiddle.net/uEgrg/
wsanville
2010-09-24 23:00:36
+1
A:
If you literally tried to apply body color and table color that'd be invalid. Both for (x)html and css.
color addresses the foreground (text) colour of an element, whereas background-color addresses its, well, background-colour. So:
body {background-color: #ffa; }
/* sets the background of the `body` element to #ffa (yellow) */
table {background-color: #f90; }
/* sets the background of the `table` element to #f90 (orange) */
I wouldn't suggest you ever use these colours together, but they're highly visible and leave no mistake about whether they're being applied, or not.
Most properties in css cascade down, some do not. But table {/* css */} is enough to cause the new values to override those set for a parent/ancestor element. Providing the new values are explicitly stated.
Apparently while there is a CSS3 not() selector (I had thought it was just a jQuery implementation, wow...), it would seem that it's implemented only in 'modern' browsers, so not widely useful at the moment. And it wouldn't really address your situation.
David Thomas
2010-09-24 23:05:16