My CSS does not work when I convert from ID to CLASS

[bakhtn]

My CSS does not work when I convert from ID to CLASS

#table {

 display: table;
 width: 420px;
 
}

<div id="table" class="main-font center">
...
</div>

The above code works, using IDs.

but the below code wont work:

.table {

 display: table;
 width: 420px;
 
}

<div class="main-font center table">
...
</div>

the other classes like main-font and center I need, but when I add table and convert from ID to CLASS it does not work.

please a solution and an explanation would be great.

[lucy24]

Preliminary note: It's generally not a good idea to use an actual html/css word as a class or id name. Too much potential for confusion. (OK, you can make an exemption for "left" "right" "center" and similar because, well, it would be silly otherwise.)

Kudos for not dumping your entire css and entire html ;) but we do need a little more information: are the classes "main-font" and "center" defined before or after the class "table", and do they contain anything that may conflict with the two rules you've set for class = "table"?

Looking up the details in w3 will probably give you a headache, but the rough-and-dirty version goes:

--inline styles take precedence over anything in a stylesheet

--id takes precedence over class

--later rules displace earlier rules

There are really a lot more levels, but that should be enough to sort out the question.

[bakhtn]

.main-font {

font-family: Arial, Helvetica, sans-serif;

}

.center {

margin-left:auto;
margin-right:auto;
width:70%;

}

[Fotiman]

OK, you can make an exemption for "left" "right" "center" and similar because, well, it would be silly otherwise.

No, those are all silly. Don't use class names that describe the presentation, use names that describe the content. That way, if you ever decide that you want to change the presentation (for example, maybe you want it to be on the right instead of the left), you only need to modify the presentation layer (the CSS) and not the content layer (the HTML markup).

[bakhtn]

Thanks Lucy, sorted it out, you were right.

[lucy24]

if you ever decide that you want to change the presentation

I'm talking here about the narrow case where presentation is the rule-- mainly in tables. (That's, ahem, real tables. Not tables for format.) Not to be confused with something like
h4.lesser {text-align: left;}
where the default h4 is center-aligned. Or even td.number, which will always be right-aligned, but may have other universal properties as well.