|
| ||||
| ||||
|
|
The CLASS attribute has a similar function
with the ID attribute. The difference is that
you can have more than one element in your document with the
same CLASS, so you can refer to them as a
group.
For instance, let's say that we want some paragraphs in our document to have one kind of rendering and others a different kind of rendering. Here's our HTML document body:
<BODY> <H1>Acme Computer Corp.</H1> <P CLASS=special>Acme Computer Corporation is a technology-based company that seeks to offer its customers the latest in technological innovation. Our products are created using the latest breakthroughs in computers and are designed by a team of top-notch experts.</P> <H1>Global Presence, Global Thinking</H1> <P CLASS=special>We are based in Acmetown, USA, and have offices in most major cities around the world. Our goal is to have a global approach to the future of computing.</P> <P>This Web site is where you can find information on our products and the technologies we use and develop daily. You can browse our product catalog, order products online, read technical manuals published by Acme Press, and read press releases and other information about ACC.<P> <H1>What's New</H1> <P CLASS=news>Dr. Arnold D. Propellerhead's best-selling book, <cite>Transfirbulation Technology</cite>, is now <a href="books/OTP/">available online</A> in its entirety. This book is a must-read for anyone interested in Object Transfirbulation and is the perfect companion for Acme's top-of-the-line Name Sequencer, M.O.R.O.N.S.<P> <P CLASS=news>Acme Computer Corp. has just acquired ThinkMeUp, Inc., the industry leader in Object Costrabulation. This bold business move promises a combination of Acme's experience in Transfirbulation with TMU's exciting Constrabulation technology. <a href="news/TMUto.html">Read the full press release</A>.<P> <HR> <ADDRESS> Comments to: <A HREF="mailto:webmaster@acme.com">Web Master</A>, Acme Computer Corp., One Acme Road, AcmeTown, USA. </ADDRESS> </BODY> </HTML>
And here's a stylesheet for it:
P.special {
font-size: bigger;
}
P.news {
font-family: sans-serif;
color: #0000A0;
}
Now the first two paragraphs, which belong to the class
"special," will have the rendering specified after the
first selector, and the remaining two will have the style
specified after the P.news selector. Like the
ID
selector syntax, CLASS selectors consist of an optional
element name followed by a period (.) and a class name.
Omitting the element names, the style sheet comes out
like this:
.special {
font-size: bigger;
}
.news {
font-family: sans-serif;
color: #0000A0;
}
Here, however, there is a difference between the two stylesheets. In the case of ID, there can be only one element in a document with the specified ID, so leaving out the element name doesn't change the elements the selector matches. Here, however, any element can have a class of, say, "special," so specifying in the selector that the selected element must also be a paragraph narrows the scope of the selector.
I know you're itching to see this example in action, so here it is.
