Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

The attributes "ID" and "Class"

Status
Not open for further replies.
seaport

seaport

MIS
Jan 5, 2000
923
US
"ID" and "Class" are two of the most important attributes of objects in a web page. However, I am pretty confused of how to use them.

I understand that "class" is for a style. How about ID? In the HTML books I read, sometimes ID can be used for a style and sometimes ID can be used for identifying the object.

Also, what will happen if I use both "ID" and "Class" for different styles?

Thanks in advance.

Seaport
 
Sort by date Sort by votes
As I understand it, ID will be replacing NAME when identifing an object. You see this change when writing pages that comply with XHTML standards. Hope that helps a little.

--Caffeinerusher
 
Upvote 0 Downvote
ID can be used as a type of style to assign additional attributes to an html entity. To use it you put a # in front of the class name in your style sheet. Then you use ID="name" (without the #) in the html tag. You should be able to use both a class and an ID on the same tag. Tracy Dryden
tracy@bydisn.com

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.
 
Upvote 0 Downvote
I understand that ID can be used to refer to a style. But in the following example, it seems that "ID" is used to refer to an object in the document, while "class" is used to refer to a style. Am I right?

Seaport

******************************
<HTML>
<HEAD>
<TITLE>Multiple Layers</TITLE>

<STYLE type=&quot;text/CSS&quot;>

.card {position:absolute; top:75px; left:75px; width=150; background:white}

</STYLE>
<SCRIPT language=&quot;javascript&quot;>

var lastDiv='two';
function showLayer( thisDiv ) {
document.all[lastDiv].style.zIndex = 1;
document.all[thisDiv].style.zIndex = 2;
lastDiv = thisDiv;
}

</SCRIPT>

</HEAD>

<BODY>
<FORM>
<INPUT type=&quot;button&quot; value=&quot;Show Layer 1&quot; onClick=&quot;showLayer('one')&quot;>
<INPUT type=&quot;button&quot; value=&quot;Show Layer 2&quot; onClick=&quot;showLayer('two')&quot;>
</FORM>
<DIV id=&quot;one&quot; class=&quot;card&quot;>
<P>This is layer number 1.</P>
</DIV>
<DIV id=&quot;two&quot; class=&quot;card&quot;>
<P>This is layer number 2.</P>
</DIV>
</BODY>
</HTML>

******************************************
 
Upvote 0 Downvote
Heres the deal:
In CSS, items can be given styles based on a fixed set of rules. The &quot;Cascade&quot; in CSS refers to the way that a style from a parent object is automatically inherited by a child object (ie: it &quot;cascades&quot; to the child and so on.).<BR>
In CSS, you can define what elements are affected by a set of styles in a few ways- you can define a style for a given tag, say, <SELECT>. When the sheet is applied to a page, that style will then change the appreance off all <SELECT> items on the page.
Heres where the ID and class come in. CLASS allows you to define a given style for a group of tags that are not neccesarily of the same type. Lets say you wanted to make every font on the page Verdana(My fav.). You can create a class (Say, .FONT?) and apply it to each item you want to be Verdana.
ID is a specific identifier unique to an item (if the document is properly formatted). Therefor, if you create a CSS specification for ID &quot;Text1&quot;, the only item on the page that will be affected by it it Text1 (Unless you have more than one &quot;Text1&quot;, which currently, browsers are allowing)
In a nutshell, Tag specifications are for all tags f that type, Class Specifications are for a group of items, not neccesarily of the same type, and ID specifications are for a single item only.

Hope I helped :)
V
 
Upvote 0 Downvote
Hi, Vampyre66,

What a wonderful explanation. That is just what I need. Thank you very much.

Seaport
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
115
lmcate
lmcate
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
420
spamjim
spamjim
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
651
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
320
PeDa
PeDa
pendle666
  • Locked
  • Question
Inserting same line of text of every web page - &quot;link&quot; insert? 1
Replies
6
Views
136
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top