FRIHOSTFORUMSFAQTOSBLOGSDIRECTORY
You are invited to Log in or Register a Frihost Account!

CSS: class and id

 


exarkun
I am learning css these few days, so just tolerate with some of my newbie questions, will ya? Wink

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?
mariohs
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 Very Happy
htmlrules
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
Code:
id="test"

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
exarkun
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.
mariohs
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...
novisdesign
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
bnbrown
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.
markosaurus
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?
bnbrown
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)
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.