Css Is Picking Up Wrong Class

I have a table element

<table width="100%" cellspacing="4" cellpadding="0" border="0" id="nicktable">

In my css class I have 2 classes

#nicktable
{
  background-color: Maroon;
}

and

table
{
    font-size: 1em !important;
    font-family: Tahoma, Verdana, sans-serif;
    border: none;

}

I want the table to use the nicktable css, but its using the table css开发者_JAVA技巧. How do I resolve this?

Actually, it is using both selectors (not classes), because your table matches both selectors.

Both of those CSS rules will apply to your table (at the same time). table { } rules will be applied to any <table> element and the #nicktable {} rules will be applied only to an element with an ID of nicktable. If you don't want the table { } rules to apply to all tables, you can put them in a class such as .mytable {} and then only apply that to the tables you want. For example:

CSS

#nicktable {
  background-color: Maroon;
}
.mytable {
    font-size: 1em !important;
    font-family: Tahoma, Verdana, sans-serif;
    border: none;
}

HTML

<table id="nicktable" class="mytable"> This will have both styles applied.
<table id="nicktable"> This will have only background-color: Maroon; applied.
<table class="mytable"> This will have only styles from .mytable { } applied.

Edit

You can also override the properties from table {} in #nicktable {} by specifying them again with new values. For example:

#nicktable {
    background-color: Maroon;
    font-family: Arial, sans-serif;
    border: 1px solid #000;
}

Since the specificity of #nicktable {} is higher than table {}, it will take precedence. Be careful when using !important however.

first of all, nicktable is an id, maybe you used this more than once? otherwise I see no error here...

Use .nicktable and class="nicktable" instead. If you still need the ID for other purposes, keep it.

You're better off using a CSS class:

<table width="100%" cellspacing="4" cellpadding="0" border="0" class="maroon">

table
{
    font-size: 1em !important;
    font-family: Tahoma, Verdana, sans-serif;
    border: none;
}

.maroon
{
  background-color: Maroon;
}

Residuum is correct. Your browser is applying the table style and then adding the id selector #nicktable. You can override the table style by including of the elements in nicktable.

Here's a good article about CSS specificity.