CSS overriding dilemma

Question

Basically I have a theme in my ASP.NET application and it contains a css file that turns all my tables blue, which looks great.

It looks like this

table
{
    background-color: #DEF1FF;
    border-color: #DEF1FF;
    color:#5793C9;
}
td
{
 // TD properties
}

But now I want one table to be a different colour. I created a class to override it:

.BlankTable
{
    background-color:#FFFFFF;
    color:#5793C9;
    font-size:medium;
    font-weight:bold;
    margin:2px;
}

I set a <table class="BlankTable"> and I have two problems:

firstly, if I put another table inside that one, it does not inherit BlankTable but uses the original table part of the css file

secondly, if I use the td part to set a td specific property (like padding), it doesn't carry across - <table class="BlankTable><tr><td>hello world</td></tr></table> results in the using the td I put in the CSS file.

Ideally what I want is to set my CSS code like this:

.Blank
{
    background-color:#FFFFFF;
    color:#5793C9;
    font-size:medium;
    font-weight:bold;
    margin:2px;

    table { // properties }
    td { // properties }
}

so it uses the table/td properties I specify for the .Blank css class. Is there any way to do this or to refactor my code somehow so I can have all tables looking blue by default, and be able to override it easily?

Answer 1

You can do that, but the syntax is :

.Blank
{
    background-color:#FFFFFF;
    color:#5793C9;
    font-size:medium;
    font-weight:bold;
    margin:2px;

}

.Blank table { // properties }
.Blank table td { // properties }

These last 2 rules will match a table and td located inside anything with class "Blank".

Answer 2

Use it like this:

.Blank table {...}
.Blank td {...}

Although I must warn you: there are rare cases where you should use a table inside another table.

Answer 3

The other answers are correct, but it's worth pointing out that this is just one type of CSS selector (the descendant selector). There are all sorts of other CSS selectors that you might want to use to target specific elements.

It's worth getting familiar with them - you might be surprised with what can (and can't) be done. (Using jQuery will also be a lot easier if you are familiar with CSS selectors.)

Answer 4

(at)edeverett: do you think one should do the styling by jQuery? I think it is better to do it by CSS itself.