Pachino Posted November 15, 2010 Report Share Posted November 15, 2010 Hi all, Just following through the wed designer DVD. Great going so far but one thing has me stumped. Class tags can be named the same as each other where as IDs can’t as they must all have the same name. If I have understood this correct I am struggling to understand how ID tags are not obsolete. Does anyone else see how you don’t need an ID tag as the Class tag can do its job and more? I obviously not getting this so can someone please elaborate and explain why you need the seemingly superseded ID tag anymore? Thanks in advance. Quote Link to comment Share on other sites More sharing options...
BeeDev Posted November 15, 2010 Report Share Posted November 15, 2010 Class conquers ID tag No not really. CSS rule specified by an ID selector will overrule a CSS rule specified by a Class selector. <div id="box1" class="square"></div> #box1 { width:100px; } .square { width:50000px; } Above div will have a width of 100px; Class tags can be named the same as each other where as IDs can’t as they must all have the same name. You mean must all have different name? ID's and classes both serve different purposes. If you wish to style a group of things similarly, then you use Classes, if you want to style an individual item out of a group of similarly styled items, then you put an ID on it and set its CSS rule. ID's are even more useful when using Javascript/jQuery Quote Link to comment Share on other sites More sharing options...
falkencreative Posted November 15, 2010 Report Share Posted November 15, 2010 ID's are even more useful when using Javascript/jQuery Just to briefly expand on this: IDs are really useful when using Javascript because it is significantly faster for the browser to find an #id tag since it is unique, rather than a class. When a browser tries to find an ID element, it can stop as soon as it has found that element. If the browser tries to find a class, it has to search the entire document, since there may be multiple elements with the same class. Quote Link to comment Share on other sites More sharing options...
Pachino Posted November 15, 2010 Author Report Share Posted November 15, 2010 Hi, thanks for replies. Still not getting the need for two tags that can do exactly the same job. If there was no such thing as an ID tag then it could not over rule the class tag. The class tag seems to be able to do everything the ID tag can and more. Quote Link to comment Share on other sites More sharing options...
virtual Posted November 15, 2010 Report Share Posted November 15, 2010 You obviously did not understand what BeeDev and Ben (FalkenCreative) wrote. They explained that they don't do exactly the same job and gave you 2 very different reasons. Once you have become more familiar with web design, css and js you will probably hit yourself on the forehead with a "Duh, the penny dropped with a sudden clang" gesture. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted November 15, 2010 Report Share Posted November 15, 2010 To say it one more time: -- IDs override classes, which may help when writing CSS -- IDs and classes do different things. IDs have to be unique while the same classes can be used multiple times. This makes things simpler when writing CSS, since as a developer, I know that every time I used an ID, it will only be used once on a page, so it will only affect one element -- Javascript has significantly better performance when selecting IDs rather than classes. When writing Javascript, if you need to select an element, it's much faster to use an ID. How you use IDs and classes depends on your coding style. In general, I use IDs to define specific sections of the page that won't repeat (header, navigation, content, footer) and then within those IDs I use classes if I need to specify something else. Quote Link to comment Share on other sites More sharing options...
Pachino Posted November 16, 2010 Author Report Share Posted November 16, 2010 @ Virtual Once you have become more familiar with web design, css and js you will probably hit yourself on the forehead with a "Duh, the penny dropped with a sudden clang" gesture. Hey there, yes I totally expect this to be the case with most of the newbie questions I will ask over the next 6 months. Like I said in my opening post Im obviously not getting this. By this I mean the way I currently see ID and Class tags is obviously wrong, but I still can't see how. @ Falkencreative How you use IDs and classes depends on your coding style. In general, I use IDs to define specific sections of the page that won't repeat (header, navigation, content, footer) and then within those IDs I use classes if I need to specify something else. Im sorry but I still don't see them as different at all. But Im really pleased for your example, and this is how I will use them. At this stage I dont really need to know why, just how to use them correctly as I don't want to get into bad habits that become difficult to correct later. Thanks for all the replies. Quote Link to comment Share on other sites More sharing options...
BeeDev Posted November 16, 2010 Report Share Posted November 16, 2010 Just think if ID's as things that can overrule Class css rules. It's especially useful when you have a CMS system, and you don't have much control over the Classes and ID's that the CMS generates, however you have total control over the CSS document. And CMS systems tend to use same classes for many different things. To really understand the usefulness of ID's and Classes working together, you need to read up a bit on "CSS Specificity" I think, because that's where the real usefulness of ID's comes shining through. Quote Link to comment Share on other sites More sharing options...
Pachino Posted November 16, 2010 Author Report Share Posted November 16, 2010 I see, Ill just put it to bed for now and no doubt get to it as and when. And then like Virtual said wonder what the question was in the first place Thanks for all the replies Quote Link to comment Share on other sites More sharing options...
virtual Posted November 16, 2010 Report Share Posted November 16, 2010 (edited) This will illustrate it better for you, you can see if you run the following code that the ID selector overrides the class selector. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <style type="text/css"> #green {color:green;} .red {color:red;} </style> </head> <body> <p class="red">This line will be red</p> <p id="green" class="red">But this line will be green, because the ID overrides the class</p> </body> </html> Edited November 16, 2010 by virtual Quote Link to comment Share on other sites More sharing options...
Pachino Posted November 17, 2010 Author Report Share Posted November 17, 2010 Hi VIrtual, I got how it overrides it. Just cannot see how that is useful at this point. Im more clinging to the fact the ID tag does exactly the same as the class tag yet the class tag can be used multiple times with the same name or not making it superior to the ID tag in my beginners mind. I am correct in saying you could build a site without ID tags and just use Class tags right? As said ill probs understand it better in a month or so. Quote Link to comment Share on other sites More sharing options...
Wickham Posted November 17, 2010 Report Share Posted November 17, 2010 I am correct in saying you could build a site without ID tags and just use Class tags right? You could but, in addition to what virtual said, using id can help you with editing later. If you have only used id once on a page you can find it more quickly if you want to edit it, whereas looking for all instances where a class has been used can take time and you may miss some. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.