homepage Welcome to WebmasterWorld Guest from 50.17.27.205
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
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




msg:4523065
 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




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

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




msg:4523189
 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




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


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




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

Thanks Lucy, sorted it out, you were right.

lucy24




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved