Newlogo.gif (8646 bytes) Style sheet classes part 3

You can include all-occurrences style rules (which automatically affect every occurrence of a particular object type) and style classes (which must be applied using the CLASS= HTML tag keyword) in the same page. When you define a style class for an object type (e.g. H1, DIV) which is also modified by an all-occurrences rule, then the class is based on the object's modified style (it sounds complicated, but the examples show how it works!).

You can also create global classes, which can be applied to any type of object.

Here's the Cascading style sheet from the <HEAD> section of this document:

How the style sheet works

H1 {color:green;font-size:36pt;} The first rule in this document's style sheet redefines the built-in H1 style, setting its foreground (text) colour to green and its font size to 36 points, while leaving all the other H1 style characteristics unchanged. All <H1> containers will automatically have this style.

H2 {color:blue} This rule defines the H2 style as having blue text. All the other standard characteristics of the H2 style are left unchanged. All <H2> will automatically have this style.

H1.alternative {color:yellow; background-color:blue} This rule defines a class called 'H1.alternative'. This is a variant (or 'sub-class') of the already-modified H1 style. It changes the foreground and background colours, but retains the 36 point size set in the first style sheet rule. You don't have to have already modified a style in order to create a new sub-class of it (i.e. the sheet could just define H1.alternative without having already modified H1) - see 'H3.alternative' below.

H2.alternative {color:red} This rule defines a class called 'H2.alternative' - a sub-class of the H2 style. The sheet now has two classes called 'alternative', but they're completely separate, each one applicable to just its 'parent' style .

H3.alternative {text-decoration:underline; color:red} This style sheet rule creates 'H3.alternative', a new sub-class of the built-in H3 style. There are now three 'alternative' classes, each belonging to a specific style. The H3 style itself hasn't been modified anywhere, so can be used in standard form.

all.MyClass {font-size:22pt; font-style:italic;
color:blue; font-weight:bold; font-family: Arial;} Finally, this rule defines a class called 'MyClass". This is a sub-class of 'all' styles (hence 'all.MyClass'), so can be applied to any HTML tag that can be styled via cascading style sheets.

How the styles are used in the document

This is modified <H1> format

Defined with just an <H1>..</H1> tag pair - the H1 rule from the CSS is applied automatically to every <H1>container.

This is H1.alternative class format

Defined with <H1 class="alternative">...</H1>. This modifies the basic H1 style (itself already modified by the H1 CSS rule) with the details from the H1.alternative CSS rule.

H2 format (including CSS modifications)

Defined with <H2>...</H2>. All <H2> containers use the CSS H2 rule.

H2.alternative class (based on CSS-modified H2)

Defined with <H2 class="alternative">...</H2>. This modifies the basic H2 style with the details from the H2.alternative CSS rule.

Standard H3 - no CSS modifications

Defined with <h3>......</h3>. There's no H3 rule in the CSS, so <H3> containers use the browser's default H3 style.

H3.alternative class - based on standard H3 style

Defined with <h3 class="alternative">......</h3>. This modifies the default h3 style with the details from the H3.alternative CSS rule.

This text is inside a DIV with class="MyClass" - a free-standing class not based on any of the built-in styles

Defined with <DIV CLASS="MyClass">........</DIV>. "MyClass" is an all. style rule class, so can be appplied to any object type.

Back to Menu