The Elementary Standards

class

Example [Basic]:

Class attributes may be used in multiple instances on a page.

Code [HTML]:

<h3 id="plynth" class="oblique"><code>Class</code> attributes may be used in multiple instances on a page.</h3>

Code [CSS]:

.oblique { font-style: oblique; }

Example [Practical]:

HTML 5 Hocus Pocus

Futuristic Retrofitting on scale not seen since Archimedes took his Eureka! bath

Code [HTML]:

<h3 class="largeText lacksLeddingBottom"><abbr>HTML</abbr> 5 Hocus Pocus</h3> <p class="lacksLeddingTop note">Futuristic Retrofitting on scale not seen since Archimedes took his Eureka! bath</p>

[Note: Multiple class names or, sets, must be separated by white space characters in the Attribute value. Each element (above) has two values — space-separated. There may be situations when four (4) class names are used.]

Code [CSS]:

.largeText { color: #666; font: 1.8em Times, Palatino, serif; }
.lacksLeddingBottom { margin-bottom: 0; padding-bottom: 0; }
.lacksLeddingTop { margin-top: 0; padding-top: 0; }
.note { font-size: .8em; }

Example [Actual Use]:

This page uses class="note" in eight (8) instances. And, class="elementSignificance" in four (4) instances; dl class="elementExample" and dt class="exampleName" are used in three (3) instances.

The class attribute is used on elements where repeating style selectors or script references in a document are required. Examples:

• Individual article comments whose div containers are identified by a single class name.
• Individual articles with summary content in a directory page whose dl containers are identified by a single class name.
• Multiple section headings (e.g., h3) separating content are identified by a single class name.

However, there is a more beneficial use of the class attribute: typography. Multiple style declarations are used individually for greater control in styling elements. The Third Example above uses this method; this method is well suited for any site that requires numerous typography settings (which may be changed at any time) in larger sites. This means that instead of writing one single selector for all possible variant typography, multiple - individual - selectors may be used in the class attribute.

An Example:

.firstHeadingUsedBeneathBannerImage { color: #778899; font: bold oblique 4em/2.8 "Times New Roman", Alcoholica, serif; text-transform: uppercase; text-indent: 20px; background-color: #000; }

Specific Example:

• .c778899 { color: #778899; }
• .fontWeight { font: bold; }
• .oblique { text-style: oblique; }
• .fontSize4EM { font-size: 4em; }
• .lineHeight2_8 { line-height: 2.8; }
• .sectionHeadingFont { font-family: "Times New Roman", Alcoholica, serif; }
• .uppercase { text-transform: uppercase; }
• .specialIndent { text-indent: 20px; }
• .background_000 { background-color: #000; }

^{^}Attribute Names/Values Guidelines:

CSS requires HTML Identifier Attributes, i.e., names, classes, and IDs, are written so that the first character is a letter [ a-z and A-Z ] or hyphen [ - ] or underscore [ _ ] but cannot start with a digit [ 0-9 ], or a hyphen followed by a digit (e.g, -9).

(x)HTML specifications state that attribute values may only contain letters [ a-z and A-Z ], digits [ 0-9 ], hyphens [ - ], periods [ . ], underscores [ _ ], and colons [ : ].

All attribute values should be delimited using double (straight) quotation marks (").