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:
<style type="text/css">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
Defined with just an <H1>..</H1> tag pair - the H1 rule from the CSS is applied automatically to every <H1>container.
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.
Defined with <H2>...</H2>. All <H2> containers use the CSS H2 rule.
Defined with <H2 class="alternative">...</H2>. This modifies the basic H2 style with the details from the H2.alternative CSS rule.
Defined with <h3>......</h3>. There's no H3 rule in the CSS, so <H3> containers use the browser's default 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.