securobo2 Posted July 15, 2010 Share Posted July 15, 2010 I am reading a book on html and it states, that the difference between a style class and id is the number of elements associated. Style id's are unique to single elements. This is very confusing because the book proceeds to make an example of using a style class for an element it says should use a style id.For example. a footer only exists once on each page, so use a style id.After the explanation, the book goes on and uses a style class instead of a style id.When I tried it out, it turns out that both do exactly the same thing.WHAT IN THE WORLD IS THIS ALL ABOUT?Someone please explain in clear exact words and please post an example of both a class and id used with a style sheet. Please explain the difference. I am stuck. Link to comment Share on other sites More sharing options...
securobo2 Posted July 15, 2010 Author Share Posted July 15, 2010 Can a moderator please move this post. I forgot to post this under CSS. Link to comment Share on other sites More sharing options...
thescientist Posted July 15, 2010 Share Posted July 15, 2010 an ID can only be used ONCE on a page. It is usually used in conjunction with Javascript to target specific elements in combination with event handlers. It also helps to give a visual clue as to the structure of your page. (header, nav, content, footer, etc).classes can be used multiple times on the page. It is meant for elements that will appear more than once but will have similar styles. You could use an ID more than once but it will not validate, and will cause problems with (relevant) Javascript functions (using that ID). However, there is no reason you couldn't use a class only once, but then if you are, why not make it an ID? Link to comment Share on other sites More sharing options...
securobo2 Posted July 15, 2010 Author Share Posted July 15, 2010 OK, please excuse me, I need you to elaborate.So what you mean is that if I have this id in the stylesheet for example. p#footer { color: red } Then in the html, I can have this, but having the id used in 2 elements violates the rule and invalidates the page. ...<body> <p id="footer">SomeTextHere</p> <p id="footer">Copyright 2010 MyNameHere</p></body> However, if I had used a class, I could do the above, just the format would be different . instead of # and etc.Also, by visual cues you mean the #footer is easy to see in the stylesheet and html and you don't expect there to be more than one, right? Link to comment Share on other sites More sharing options...
thescientist Posted July 16, 2010 Share Posted July 16, 2010 OK, please excuse me, I need you to elaborate.So what you mean is that if I have this id in the stylesheet for example.p#footer { color: red } Then in the html, I can have this, but having the id used in 2 elements violates the rule and invalidates the page. ...<body> <p id="footer">SomeTextHere</p> <p id="footer">Copyright 2010 MyNameHere</p></body> However, if I had used a class, I could do the above, just the format would be different . instead of # and etc.Also, by visual cues you mean the #footer is easy to see in the stylesheet and html and you don't expect there to be more than one, right? let me expound on your exampleCSS/*this creates a footer ID that is centered within its container*/#footer{ width: 800px; margin: 0px auto;}/*All <p> tags in the element footer with have this style */#footer p{ color: red;}/*this element will have blue text*/.blue{ color: blue;} HTML <html> <body> <div id="content"> <!--random div--> <p class="blue">Hello</p> <p class="blue">World</p> </div> <div id="footer"> <p>Check out this text, it will be red</p> </div> </body></html> just to give you some simple examples of how CSS ids, classes, and selectors work. Link to comment Share on other sites More sharing options...
securobo2 Posted July 16, 2010 Author Share Posted July 16, 2010 Ok, I got it (the book examples use element#idname instead of #idname element), but for the part about invalidating the page. Did I understand it correctly in the example I gave in my post? Link to comment Share on other sites More sharing options...
boen_robot Posted July 16, 2010 Share Posted July 16, 2010 Yes. If you have two equivalent IDs on the same HTML page, that HTML page will be invalid. Not the case with classes. But classes are only meant to be used when you need to target more than one elemenet per HTML page.The "element#id" form is useful if you apply the same stylesheet on different HTML pages. If on one of them the element with the ID is a "p", and on another one, it's an "h1", you can use the "element#id" form to create separate styles for each, while using "#id" to create styles common to both of those elements. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.