Jump to content

id tag and class


cranebill
 Share

Recommended Posts

Hi, can someone please explain the difference between these two tags as I am having huge problems understanding the difference (as silly as it may seem )

Link to comment
Share on other sites

The ID on an HTML tag is used to identify it.It's usually for Javascript, because you can access it with the getElementById() function.But it also gives a meaning to your document divisions (<div> tags) for other developers who are reading your code.Class is just an attribute used to assign a CSS style to an object.

Link to comment
Share on other sites

Hope I understood your question.In addition to the answer above, here's more:ID's and CLASSES perform the same functions in an HTML document, for example:Is the same thing if you say:

<div id="container"></div>

Than if you say:

<div class="container"></div>

BUT you can only use ONE ID in a page.For example, you CAN NOT do this:

<html>   <body>	 <div id="container">Some content here...</div>	 <div id="container">And other stuff here...</div>   </body></html>

But you CAN do this:

<html>   <body>	 <div id="container">Some content here...</div>	 <div class="container">And other stuff here...</div>	 <div class="container">More stuff...</div>	 <div class="container">And then some....</div>   </body></html>

You can use the same div ID but ONLY in different pages, not in the same page more than once. Classes, on the other hand, can be used as many times as you want in as many pages as you want.

Link to comment
Share on other sites

Hope I understood your question.In addition to the answer above, here's more:ID's and CLASSES perform the same functions in an HTML document, for example:Is the same thing if you say:
<div id="container"></div>

Than if you say:

<div class="container"></div>

BUT you can only use ONE ID in a page.For example, you CAN NOT do this:

<html>   <body>	 <div id="container">Some content here...</div>	 <div id="container">And other stuff here...</div>   </body></html>

But you CAN do this:

<html>   <body>	 <div id="container">Some content here...</div>	 <div class="container">And other stuff here...</div>	 <div class="container">More stuff...</div>	 <div class="container">And then some....</div>   </body></html>

You can use the same div ID but ONLY in different pages, not in the same page more than once. Classes, on the other hand, can be used as many times as you want in as many pages as you want.

Link to comment
Share on other sites

Hi, can someone please explain the difference between these two tags as I am having huge problems understanding the difference (as silly as it may seem )
Neither is a tag. Both are attributes of a tag. They have different functions, but can work the same way. You have an "id" on some tag such as a <div> tag (<div id="something">). In this case, "something" might refer to some css (#something {stuff}) or be used as the anchor from a link.OTOH, class always refers to css and is a way to have a common look to different things. For example, you might want to center some stuff so you could have this (.someclass {text-align:center;}) used in 10 tags (<p class="someclass">).
Link to comment
Share on other sites

CSS is very flexible. It gives you many ways to identify things so that you can do a really custom job. One thing you'll often want to do is define a class for a whole group of things. Then you want an exception. Rather than define ALL the attributes for the exception, you can let it inherit the normal attributes from the class, and then just define the difference(s) for the exception. If your items have IDs anyway, using the ID indentifier is convenient (but not the only way to do what I've described). Here's how such a situation might look in CSS:div.hello {background-color: #444444; color: #ffffff; border: solid 1px #ffaaaa; height:100px; width: 300px}div#bob {color: #aaffaa}Now, <div class="hello" id="bob"> will have all the attributes of class "hello" except that its text will be green instead of white. IMO, this is really the best use the ID identifier.

Link to comment
Share on other sites

There is a "Specificity" involved as well.DD points out that the ID and Class can be used together to affect the output. The w3c also has a page which explains that the actual output can be affected by the manner in which you target an element.ID's carry more weight than classes, so in many instances, an ID "trumps" the class...The specific on speficity can be found by reading (several times) the following page: http://www.w3.org/TR/REC-CSS2/cascade.html#specificity

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...