Welcome to WebmasterWorld Guest from 54.226.238.178

Forum Moderators: not2easy

Message Too Old, No Replies

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

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

     
12:14 am on Nov 28, 2012 (gmt 0)

New User

joined:Nov 4, 2011
posts:6
votes: 0


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.
2:13 am on Nov 28, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13218
votes: 348


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.
1:56 pm on Nov 28, 2012 (gmt 0)

New User

joined:Nov 4, 2011
posts: 6
votes: 0


.main-font {

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

}

.center {

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

}
2:05 pm on Nov 28, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4988
votes: 12



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).
6:13 pm on Nov 28, 2012 (gmt 0)

New User

joined:Nov 4, 2011
posts:6
votes: 0


Thanks Lucy, sorted it out, you were right.
9:45 pm on Nov 28, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13218
votes: 348


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.