Hey all! I'm back!
(warning: I am a novice working on my first style sheet for my first web page)
I'm wondering about the difference between Classes and IDs in XHTML. I just noticed that a lot of pages out there are using ID's to do the same things I'm using classes for. My gut and my limited C++ background (waaay back
) are telling me that using classes is probably a heavy handed approach to setting up individual elements for styles. I can't seem to find definitions that clear up the difference for me though...
Can anyone compare and contrast the two?
Thanks!
-claythe class tag specifies that there may be more than one object with that particular style set attributed to them. The id tag says that there is only one tag with this particular id, and this is the style that needs to be applied to it.
<div class="genericClass" id="divOne">Fine</div>
<div class="genericClass" id="divTwo">Fine</div>
<div class="genericClass" id="divOne">Incorrect Id divOne is already taken</div>
Giving an object an id gives an easy and excellent way to retrieve that tag using getElementById(elementId).IDs can only be used once (to validate at least), and are more commonly used with big blocks of text (like a whole page or paragraph). IDs are also used for javascript stuff.
classes can used a crapload of times, and are more commonly used for small amounts of text (like making a few words bold, in which case would be used with <span> and not <div>.Ahhh That totally makes sense to me now. Thanks guys!
(Selrach, Woot! DC! )Might I add that an element can only have a single ID at a time while it can have multiple classes at once.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<title></title>
<style type="text/css">
.b{font-weight:bold;}
.i{font-style:italic;}
.u{text-decoration: underline;}
.arial{font-family:arial,sans-serif;}
.large{font-size:large;}
</style>
</head>
<body>
<div class="b i u arial large" style="color:rgb(0,0,255);background-color:rgb(255,0,0);">
Bold Italic Underline Blue Arial Large text on a red background
</div>
</body>
</html>
(warning: I am a novice working on my first style sheet for my first web page)
I'm wondering about the difference between Classes and IDs in XHTML. I just noticed that a lot of pages out there are using ID's to do the same things I'm using classes for. My gut and my limited C++ background (waaay back
) are telling me that using classes is probably a heavy handed approach to setting up individual elements for styles. I can't seem to find definitions that clear up the difference for me though...Can anyone compare and contrast the two?
Thanks!
-claythe class tag specifies that there may be more than one object with that particular style set attributed to them. The id tag says that there is only one tag with this particular id, and this is the style that needs to be applied to it.
<div class="genericClass" id="divOne">Fine</div>
<div class="genericClass" id="divTwo">Fine</div>
<div class="genericClass" id="divOne">Incorrect Id divOne is already taken</div>
Giving an object an id gives an easy and excellent way to retrieve that tag using getElementById(elementId).IDs can only be used once (to validate at least), and are more commonly used with big blocks of text (like a whole page or paragraph). IDs are also used for javascript stuff.
classes can used a crapload of times, and are more commonly used for small amounts of text (like making a few words bold, in which case would be used with <span> and not <div>.Ahhh That totally makes sense to me now. Thanks guys!
(Selrach, Woot! DC!
)Might I add that an element can only have a single ID at a time while it can have multiple classes at once.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<title></title>
<style type="text/css">
.b{font-weight:bold;}
.i{font-style:italic;}
.u{text-decoration: underline;}
.arial{font-family:arial,sans-serif;}
.large{font-size:large;}
</style>
</head>
<body>
<div class="b i u arial large" style="color:rgb(0,0,255);background-color:rgb(255,0,0);">
Bold Italic Underline Blue Arial Large text on a red background
</div>
</body>
</html>