CSS Style Sheet Classes and Comments

CSS Style Sheet Classes

Classes can be used to further define styles for different occurrences and uses of particular selectors by using the CLASS attribute with the corresponding tags. If the following rules are defined for the style sheet:

H1.title {color: red}
H1.detail {color: green}
H1.loud {color: black}

within the HTML document you can invoke different styles for different circumstances by using the CLASS attribute. The HTML would be:

<H1 CLASS=title>Home Page</H1>

If you omit the selector from the definition, the class definition can be used with a range of tags, as a generic value. For example, if we defined the following class in the style sheet as:

.detail {color: green}

it can be used in the HTML code as:

<P CLASS=detail>
or
<H1 CLASS=detail>

Assigning a Style To a Particular Element

A style can be assigned to a particular element by giving it an ID code, and then using that ID within the HTML tag. For example, if we declare an ID code to represent a color:

#loud {color: red}
the style can be invoked in an HTML statement:

<P ID=loud>This text is emphasised</P>
This use of the rule only affects one element.

Comments in CSS Style Sheets

Comments can be added to style sheets using the /* and */ symbols. For example:

H1 {color: red} /* Emphasises the heading */

These symbols can also be used to insert block comments:

/*--------------------------------------------------------------------------------
This is a long form of comment which can be used to explain a section of your style sheet in detail. It can be used to describe your reasons for using a particular style. This makes it easier for others who are perhaps maintaining the style sheet to understand the rules.
--------------------------------------------------------------------------------*/