CSS
Classes - part 2CSS
Classes - part 2This version of the page contains the following Cascading Style Sheet:
<style>
DIV.cyanback { background-color:cyan; border: 2px blue solid }
DIV.bigtext {background-color:yellow; font-size:24;
font-weight:bold; color:blue; border:2px blue solid;}
</style>
The sheet's two rules define classes of style for the object type DIV. The sheet doesn't contain an 'all-occurrences' rule for DIVs, so a standard <DIV> tag (see first example below) doesn't receive any special style. To use one of the classes, a <DIV> tag must contain an extra CLASS="classname" keyword, specifying which class to apply (see example text).
This text is inside a DIV created using a standard <DIV> tag
This text is inside a DIV created using a <DIV class="cyanback"> tag
This text is inside a DIV created using a <DIV class="bigtext"> tag.
Only DIV tags can use these classes - if you entered a <H1 CLASS="bigtext"> tag, nothing would happen, because there's no 'bigtext' class defined for H1 objects. However you could create an H1.bigtext CSS rule, and it could have different style properties to the DIV.bigtext rule. DIV and H1 objects would automatically use the right 'bigtext' class for them.
You can also create global classes, which can be applied to any object type. For example, the rule:
all.redbold {color:red; font-weight:bold;}
could be used in tags such as <DIV CLASS="redbold">, <P CLASS="redbold"> and so on. See the next page from the menu for more examples of classes in action.