Module 10 - Page 18

CLASS

We've talked about defining tags using selectors, contextual selectors, and properties in CSS declarations. But what happens if you want to define several variations on a single tag, such as the P tag? In traditional publishing, there are body text paragraphs, and callout paragraphs, and footnote paragraphs, among many many others; the CSS syntax we have learned so far does not allow us to create multiple variations on a single tag (beyond the limited capabilities provided by contextual selectors in CSS declarations).

To define more than one version of an HTML tag, you need to use a CLASS. Class declarations in CSS are prefixed with a dot (.), followed by the name of the class, a space, and the curly-braces containing the style properties; as with any CSS declaration, you may define as many properties for a class declaration as you wish.

Example:

.warning { color:#FF0000; }

In the above example, I have created a CSS declaration defining a class called "warning", which causes text to be bright red. This syntax creates a GENERAL class, which may be applied to ANY HTML tag. Obviously, this class declaration must be placed within either a linked or embedded style sheet.

In an HTML page connected to this CSS declaration, then, I would add the CLASS attribute to any HTML tag; the value of the CLASS attribute would be the name of the desired class in the style sheet, "warning".

Example:

<p class="warning">This paragraph has had the warning class applied to it.</p>

Because I have created a general "warning" class, I can apply it to other tags, as well.

Example:

<p>Here is a paragraph with a <b class="warning">special</b> word in it.</p>

Example Page (with embedded style sheet):

<html>
<head>
<title>Example CSS Page</title>
<style type="text/css">
<!--
p { color:#000000; }

.warning { color:#FF0000; }
//-->
</style>
</head>
<body>
<p class="warning">This paragraph has had the warning class applied to it.</p>

<p>Here is a paragraph with a <b class="warning">special</b> word in it.</p>
</body>
</html>

Here is the above example displayed.

Now, if you want to restrict usage of a class declaration to ONE kind of HTML tag, you can specify that it in the class declaration, as well, by adding the desired tag selector before the dot (.) character.

Example:

p.warning { color:#FF0000; }

By adding the P tag selector before the dot (.) character in the above class declaration, I have restricted usage of this class to the P tag.

In the following code, then, only P tags would be able to accept the "warning" class; other tags will NOT be able to use the "warning" class.

Example (in context):

<html>
<head>
<title>Example CSS Page</title>
<style type="text/css">
<!--
p { color:#000000; }

p.warning { color:#FF0000; }
//-->
</style>
</head>
<body>
<p class="warning">This paragraph has had the warning class applied to it.</p>

<p>Here is a paragraph with a <b class="warning">special</b> word in it.</p>
</body>
</html>

Here is the above example displayed. Notice how the B tag is now unaffected by the "warning" class?

I may also use contextual selectors before the dot (.) character in a class declaration to further restrict class usage. For instance, I could restrict the "warning" class to B tags which were children of P tags by using the following syntax:

p b.warning { color:#FF0000; }

Example (in context):

<html>
<head>
<title>Example CSS Page</title>
<style type="text/css">
<!--
p { color:#000000; }

p b.warning { color:#FF0000; }
//-->
</style>
</head>
<body>
<p class="warning">This paragraph has had the warning class applied to it.</p>

<p>Here is a paragraph with a <b class="warning">special</b> word in it.</p>
</body>
</html>

Here is the above example displayed. Notice how the warning class in the above example applies only to B tags which are children of P tags, and NOT the P tag by itself?

Restrictive class declarations can prevent you from applying inappropriate class styles to HTML tags, and can be useful if you are creating extremely complicated style sheets.

Class names must NOT be repeated in a style sheet. You can NOT, for instance, create two classes of the same name for different tags.

Example (WRONG):

p.warning { color:#FF0000; }
p b.warning { color:#FFFF00; }

Since every class name must be unique, a common practice in this circumstance is to append the name of the tag to the end of the class name, giving you unique names.

Example (CORRECT):

p.warningP { color:#FF0000; }
p b.warningPB { color:#FFFF00; }

Although I have discussed specifics of restricting classes, most class declarations that you will make will be GENERAL classes (e.g. without a selector prefix before the dot character).

The SPAN tag may also be used in combination with the CLASS attribute. The SPAN tag itself does not have any special formatting associated with it, and lends itself well to acting as a generic shell HTML tag. In this kind of situation, the SPAN tag would NOT be considered an inline style sheet, because its CLASS style information would be defined in a linked or embedded style sheet; the SPAN tag would merely be a blank HTML tag which you could apply CSS properties to.

Example:

<p>Here is some text with <span class="warning">special words</span> in it.</p>

As you can imagine, classes really open up possibilities and complexities in CSS. Using the CLASS attribute and class declarations in style sheets, you can create as many different style variations for an HTML tag as you wish. You may also greatly refine the look-and-feel of your HTML pages, using a mechanism which allows for easy and rapid changes.

Example:

body { background:#CCCCCC; }
p { font-size:18pt; color:#000000; font-family:"Times New Roman", "Times", serif; }
p.callout { font-size:16pt; margin-left:1in; margin-right:1in; }
p.note { font-size:12pt; }
.special { font-style:italic; color:#660066; }

Example (in context):

<html>
<head>
<title>Example CSS Page</title>
<style type="text/css">

</style>
</head>
<body>

Here is a body text paragraph. In this paragraph, I would say something, if I had something to say. Since I have nothing to say, I, like many modern politicians, will run on and on without saying anything; making noise is so important. In another speech, Horatius Q. Vanderfeller said:

"What is today, is yesterday, and what is tomorrow is the day after tommorrow. Time is an illusion. That's why I'm eating shrimp for dinner!"

Here is another body paragraph.

Watch out for those silly quotations... They are very dangerous.
</body>
</html>

Here is the above example displayed.

Now, I can change that page's look-and-feel simply by changing the style sheet. In the following example, I have ONLY changed the properties in the embedded style sheet; I have changed NOTHING in the HTML itself. Note: I am using embedded style sheets simply so that you may see the code all in one place; if I were making this style sheet for the real world, I would be using a LINKED external style sheet so that I could apply these styles to MANY pages.

Example:

<html>
<head>
<title>Example CSS Page</title>
<style type="text/css">

</style>
</head>
<body>

Here is a body text paragraph. In this paragraph, I would say something, if I had something to say. Since I have nothing to say, I, like many modern politicians, will run on and on without saying anything; making noise is so important. In another speech, Horatius Q. Vanderfeller said:

"What is today, is yesterday, and what is tomorrow is the day after tommorrow. Time is an illusion. That's why I'm eating shrimp for dinner!"

Here is another body paragraph.

Watch out for those silly quotations... They are very dangerous.
</body>
</html>

And here is the above example displayed.

Main Menu