Using Classes to Create Styles

Using Classes to Create New Styles

The style of any element can be redefined in a stylesheet, as described in the section on Style However, sometimes you want to use the redefinition only at certain times. Take for example, the gray boxes that I use to enclose code. They are made using the <pre> element, but I use the <pre> element for other purposes as well. This is a good occasion to use a class to set the style.

I defined a class "code" in my style sheet as follows:

pre.code {background:#eeeeee; margin-right:300px; border-style:groove; border-width:thin;
          font-family:Monospace; font-size:14px}

Then to produce each gray box, I assigned the class to each instance of <pre>, as follows:

<pre class="code">text goes here
</pre>

Details of Defining and Using Classes

The following are class definitions that I have used in writing this web page. They could appear in either external or internal style sheets.

div.caption{font-weight:bold; text-align:center}

div.box{border-style:groove; padding-left:20px;padding-top:20px;padding-bottom:20px}

pre.code {background:#eeeeee; border-style:groove;border-width:thin; font-family:monospace; margin-right:300px}

span.code{background:#eeeeee; border-style:hidden;border-width:thin; font-family:monospace}

.fancy{font-family: Monotype Corsiva, Comic Sans Ms;
             font-size:16px}

Note that:

"div.caption" means that the class "caption" can be used with the element <div>,
while ".fancy" means that the class "fancy" can be used with any element.
Any number of classes can be defined for a given element.
The same class name can be used to define classes with different elements. The class definitions don't have to be the same.

Classes are used by placing the class attribute in the start tag of an element. An element can be assigned only one class. Thus to produce fancy text within a box, we cannot write:

<div  class="fancy" class="box">
text goes here
</div>

text goes here

as only the first class attribute will be assigned.

div and span

The <div> and </div> tags allow you to mark special sections of your document. The div tags can enclose most any kind of tag -- paragraphs, images, lists, tables, forms, anchors, other div elements, etc. Any number of elements can be enclosed within the div tags. For example, you might enclose each chapter within div tags.

The <span> tags play a role similar to div. However, they cannot contain other elements, so they are used to group inline text.

Using Class and Div Together to Create New Styles

Div is a powerful formatting tool. A class given to the div element can be applied to any kind of element -- e.g. a paragraph, a list, a table, etc. -- simply by placing that element between the div tags.

Boxes

One common use of classes is to place text in boxes. We use the div tag to define the class "box" in the stylesheet.

div.box{border-style:groove; border-width:thin;
        padding-left:20px;padding-top:20px;padding-bottom:20px}

Then any element can be placed inside the so called 'div box'.

<div class="box">
<p>
  Boxes are useful for emphasizing important text
</p>
</div>

Boxes are useful for emphasizing important text

Using Classes to Define List Styles

The same box can be used to hold a definition list and its caption.

<div class="box"> 
  <div class="caption"> Glossary </div>
  <dl>
    <dt>metal  <dd> a hard, shiny, ductile substance, which conducts heat and electricity well
    <dt>nonmetal <dd>a usually dull, often brittle material, which conducts heat and electricity poorly
    <dt>metalloid <dd>an element whose properties are intermediate between the metals and the nonmetals.
  </dl>
</div>

Glossary

metal: a hard, shiny, ductile substance, which conducts heat and electricity well
nonmetal: a usually dull, often brittle material, which conducts heat and electricity poorly
metalloid: an element whose properties are intermediate between the metals and the nonmetals.

More Boxes

Boxes can be made with eight different border styles. The borders can be of different widths, and different colors. The background color of the box can be of different colors too. See the table in the Style section for details.