Style Sheets - Part 6 (Classification and Identification)

One of the problems with style sheets is the assignment of styles to different sections of text that are enclosed with the same kind of tags. For instance, you might have your everyday boring paragraph like this:

<P>I could really go for a big glass of Guinness right now.</P>

Then, you might have something a little more hyper:

<P>Because of Y2K, all of the computers are going to fail, the power grid will
collapse, and angry mobs will be running through the streets killing your pets
and eating your children!!!! And they're going to drink your Guinness!</P>

Needless to say, you might want to stylize each of these paragraphs differently depending on what you are trying to convey to the reader.

To do this, it is possible to assign each element of a document to a class using the CLASS attribute. For example:

<P CLASS=guinness>I could really go for a big glass of Guinness right now.</P>

<P CLASS=spaz>Because of Y2K, all of the computers are going to fail, the power grid will
collapse, and angry mobs will be running through the streets killing your pets
and eating your children!!!! And they're going to drink your Guinness!</P>

Now, within the style section, you can define the style rules for each class of the P tag like this:

<STYLE type="text/css">
   P.guinness {text-align:center; text-decoration:underline; font-weight:bold}
   P.spaz {color:red; margin-left:5em; margin-right:5em; border: solid darkred 3px}
</STYLE>

This now results in the following output:

I could really go for a big glass of Guinness right now.

Because of Y2K, all of the computers are going to fail, the power grid will collapse, and angry mobs will be running through the streets killing your pets and eating your children!!!! And they're going to drink your Guinness!

It is also possible to attach a style to a specific element using the ID attribute. For example:

<P ID=gimme>Only my book can save your Guinness! Send me $29.95 now. Do not delay!</P>

Now, in the STYLE section...

<STYLE type="text/css">
   #gimme {color:white; background:red; text-align:center; text-decoration:blink; font-weight:bold}
</STYLE>

And here's what happens (note: we deduct points if you EVER use the blink attribute for real):

Only my book can save your Guinness! Send me $29.95 now. Do not delay!

Style Sheets - Part 6 (Classification and Identification)

Next