 Class and ID Attributes |   |
|
Class and ID Attributes | |
The CLASS attribute
What if you could make up your own tags? Well now you can by inserting your own attributes into the HTML Source Code Window using the CLASS attribute.
Start by deciding on a name. Here we have used "ROCKY" and "BULLWINKLE". Then place the name of your new attribute in the Style Sheet. Make sure there is a period (.) before the name.
Then apply the properties to that tag. In this example, .ROCKY is given Arial font, whereas . BULLWINKLE is given Times New Roman font.
Finally, to apply the attributes to your webpage, you must use the CLASS= tag. With the name of the attribute after the equals (=) sign.
Example:
<STYLE TYPE="text/css">
.ROCKY {
font-family: Arial;
color: #FF00FF;
background: #000000;
}
.BULLWINKLE {
font-family: Times New Roman;
color: #FFFF00;
background: #800080;
}
</STYLE>
<BODY>
<P CLASS=ROCKY>This font is Arial.</P>
<P CLASS=BULLWINKLE>This font is Times New Roman.</P>
</BODY>
The ID attribute
Similar to the CLASS attribute, the ID attribute is different because it CAN NOT be used more than once in a webpage. In the CLASS attribute example above, the ROCKY attribute could be used more than once. An ID attribute can only be used once. The creation of one is the same as CLASS attributes except that a number sign (#) is required before the name. The name MUST START WITH A LETTER. It can be a word or a word/number combination.
Example:
<STYLE TYPE="text/css">
#B213 {
font-family: Arial;
color: #FF00FF;
background: #000000;
}
#B214 {
font-family: Times New Roman;
color: #FFFF00;
background: #800080;
}
#BOB {
font-family: Verdana;
}
</STYLE>
<BODY>
<P ID=B213>This font is Arial.</P>
<P ID=B214>This font is Times New Roman.</P>
<CENTER ID=BOB>This font is Verdana.</CENTER>
</BODY>
You would not be able to repeat the same ID in the same webpage. ID attributes are exclusively used once.