Grouping

Grouping is a powerful feature of CSS. It allows you to define a class or id to a style. This way, you can define a central style within the header of the document, and make references to that central style. Now if you want to change everything in the document, all you have to do is change the central definition.

The difference from a CLASS and an ID is that a CLASS is just a definition that has a name whereas an ID is associated with a specific tag. Here's and example of CLASS:

<HTML>
<HEAD>
<STYLE type="text/css">
<!--
  B.rockin { color:blue }
  .rockin { font-style:italic }
-->
</STYLE>
</HEAD>
<BODY>
This is an example of <B class="rockin">blue text</B>.
<P class="rockin">
This is an example of some italic effects.
</P>
</BODY>
</HTML>

See this example.

A class is defined with a period in the selector. Notice that if the selector includes an HTML tag before it, then that particular definition will only affect that HTML tag. In our example, the bold tag was changed to blue, and all tags of that class were made italic.

The ID grouping is very similar to the class grouping. Look at the following example.

<HTML>
<HEAD>
<STYLE type="text/css">
<!--
  B#rockin { color:blue }
  #rockin { font-style:italic }
-->
</STYLE>
</HEAD>
<BODY>
This is an example of <B id="rockin">blue text</B>.
<P id="rockin">
This is an example of some italic effects.
</P>
</BODY>
</HTML>

See this example.

The id is defined with a pound sign in the selector. Note that Netscape (4.03) appears to render this version improperly.

Previous Section
Style 2

Table of Contents

Next Section

Spanning