CODEWITHSUNDEEP
asp.netcsslayout
Simon
Simon

Reputation:

CSS overriding dilemma

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?

Upvotes: 0

Views: 392

Answers (3)

edeverett
edeverett

Reputation: 8218

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.)

Upvotes: 0

stefanw
stefanw

Reputation: 10570

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.

Upvotes: 3

Philippe Leybaert
Philippe Leybaert

Reputation: 171814

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".

Upvotes: 3

Related Questions