Question:
When should I use the id attribute and when should I use the class attribute for an XHTML tag,
and why would I use both?
Answer - CSS:
Consider the following XHTML code:
<div id="sky" class="tnr">
This text is Times New Roman (serif)</div>
<div id="clouds" class="tnr">
This text is Times New Roman (serif)</div>
Both want to display text on the webpage using Times New Roman
instead of the inherited default font (Arial) defined in the document,
but one wants a blue background, and the other wants a gray background.
CSS accommodates with:
body {
font-family: Arial, Sans-Serif;
.tnr {
font-family: "Times New Roman", Serif;
}
#sky {
background-color: #c0f3f9;
}
#clouds {
background-color: #d9d9d9;
}
The webpage displays:
This text is Times New Roman (serif)
This text is Times New Roman (serif)
Answer - JavaScript:
Consider the following XHTML code:
<div id="sun">
This text is on a yellow background</div>
The id gives JavaScript a handle to get a hold of that object (XHTML tag/element).
Once JavaScript has a hold of that object,
it can dynamically (DHTML) change its properties.
For example, without a class, the text displays on the webpage
with the inherited default font (Arial) defined in the document,
but JavaScript can change that to Times New Roman. e.g.
var tagObj = document.getElementById("sun");
tagObj.className = "tnr";
The webpage displays (before and after JavaScript):
This text is on a yellow background
This text is on a yellow background
Summary:
An id must be unique, and cannot be used by more than one tag,
but the same class can be shared by many tags.
Using both allows a tag to have both unique and shared properties.
Tag ids and classes are one way JavaScript leverages the DOM (Document Object Model)
to dynamically alter style, content, and behavior of a webpage.
Also:
HTML tags may have more than one class - seperated by spaces:
.colorHi {
color: #900;
}
.fontBold {
font-weight: bold;
}
.fontBig {
font-size: 120%;
}
...
<p class="colorHi fontBold fontBig">
The tag for this text has 3 classes!</p>
The webpage displays:
The tag for this text has 3 classes!
Finally:
Tags are not required to have ids or classes. CSS can style tags directly,
as well as target certain tags within the DOM. CSS can also style many tags at one time.
Proper "semantic" markup makes it easier to style pages, letting HTML do some of the work
simply as a result of proper structure. As always:
Simple is good, simpler is better, and simplest is best!
/* style several tags at once */
h1, h2, h3 {
font-family: Verdana, Sans-Serif;
}
/* target only certain a tags */
#studentList li a {
color: #04a;
}
DHTML:
Dynamic-HTML comes in 2 flavors: client-side and server-side.
The above JavaScript examples are client-side: controlling the webpage after it is in the browser.
Server-side methods include reading and writing to a database to personalize a webpage
before it is sent to the browser.