Welcome to WebmasterWorld Guest from 54.227.110.209

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

     

bakhtn

12:14 am on Nov 28, 2012 (gmt 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.

lucy24

2:13 am on Nov 28, 2012 (gmt 0)

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



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

1:56 pm on Nov 28, 2012 (gmt 0)



.main-font {

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

}

.center {

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

}

Fotiman

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

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




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

6:13 pm on Nov 28, 2012 (gmt 0)



Thanks Lucy, sorted it out, you were right.

lucy24

9:45 pm on Nov 28, 2012 (gmt 0)

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



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month