Element "Class": think Element "Adjectives"Jan 30 2013

A class is a specialized version of a basic style element like <p>

Not all paragraphs have to be styled the same. For example, a paragraph example may have a different color text or be indented or both. This gives far more control over the basic content elements!

a standard tag like "p" can have several different "classes" of style

This is done in the <Head> portion of the HTML Document with "readable code" as shown below:

   <style>
   p.border { border     : 4px silver groove   }
   p.margin { margin     : 50px;               }
   p.backgnd{ background : beige               }
   p.padding{ padding    : 10px 40px 10px 40px }
   </style>
   

global versus targetted class

Class can be defined as a "global".bg class or as a targetted p.bg class

Here p.bg is "yellow", whereas the "global" bg class is silver

Cascading Classes

Style can even be cascaded as is shown in this demo

Paragraph Border Style

Paragraph Border + Margin Style

Paragraph Border + Margin + Padding + Background Style