I am learning css these few days, so just tolerate with some of my newbie questions, will ya?
What is the difference between a class and an id? Both can be used in <div>, but in my sense, both are the same thing. Can anyone tell me when to use class and when to assign id?
you can only have one id (someone correct me if i am wrong) for each page... you cannot have 2 divs (nor any other tag) with the same id. on the other hand, you can have many divs (and all other tags) with the same class. you can also mix classes and tags, classes and ids...
example:
| Code: |
<div class="small">
<p class="small"> |
these both will be affected by your css .small declaration
if you want to target only the p or the div tag, just do div.small or p.small in your css. remember that if you put only div on your css will affect ALL divs in your page
other example:
| Code: |
| <div id="header" class="small"> |
this will be affected by your #header, .small, div.small, div css declarations
hope I clarified some things for you and did not confuse even more 
ok now in javascript and many other interactive scripts you can call in ID tag and well write in that tag ans so forth as an example
| Code: |
<script type="text/javascript">
document.getElementByID("test").innerHTML = "this is a test"
</script> |
That is the javascript code to call and write "This is a Test"
The code for the div tag would look like this.
| Code: |
| <div id="test"></div> |
You can also call a CSS information what ever yo call it i cant recall it right now using the
By the way if you are using it for this reason then you should not have two or more ids with the same name
To use a class all it does is receive information from the CSS document
Thanks for telling me that. I guess that using classes is alright and I wold rather avoid using ids. Because I thought that two ids can be used at the same page.
| exarkun wrote: |
| Thanks for telling me that. I guess that using classes is alright and I wold rather avoid using ids. Because I thought that two ids can be used at the same page. |
Don't be so strict... let's take an example...
supposing that your site has a header, footer, menu and main content sections, each one separated by a div...
you can have the divs like <div id="header"> <div id="menu"> because you will only have one in your page, doesn't need to put in a class... but this is up to you... ids exist to be used, otherwise there would be only classes in w3c css specs...
Id's may only be used once for every element in the document. Class attributes can be used on many elements so that css can put the same style on many elements. But javascript can only get elements by their id (and others), not class.
-gs
If you use id in your tag (like <div> or <p> etc) you use in the .css file #menu, #main etc
When using class you use .menu .main etc
That is one basic difference. Class can be used multiple times on a page. I never tried id to use it for - it may be true as the others say that it is only once to be use for an element.
How I still used id is the way with javasrcipt pointing to a an id - this javascript can read for sure. (I don't know about it's functionality with classes)
If you use javascrip to be used together with styling use id, use class otherwise - as for my view.
That has also helped me out a lot, I used to get confused with this issue a lot myself but the last few posts have helped to clear things up for me a lot.
Anyone have any clever tips for remembering the way to call classes and id's?
As I understand it id's are called using #content etc,
classes are called using .class
Is this correct?
Also am I right in thinking in summary then that classes can be applied to multiple attributes and id's can be used only once on a page?
Yes, right. You can find also better explanations here: http://css.maxdesign.com.au/selectutorial/advanced_idclass.htm
and here:
http://www.htmlgoodies.com/beyond/css/article.php/3470231
Now I learned that if there is a conflict in css file on an element let's say a div contains <div class="text" id="text">
and the class says:
| Code: |
.text{
font-family: arial;
} |
but the id would say:
| Code: |
#text{
font-family: sans;
} |
the id would win because id has a greater priority in css compared to class! (as far as I understand)