Class is a CSS style rule that is used when we want to use the same style rule for multiple selectors. For example, when we style a selector, let us say h1 or header, we use style rules separately for those selectors only. However, if we wanted multiple selectors to use the same style rule, we cannot do that. That is where class rule comes to the rescue.
To remember the rule, keep in mind that Class refers to many selectors not just one. Class has one unique requirement. When using Class, a serlector must be preceded by a dot (.) like shown below:
.classname{ property:value; }
Important Note:We create a style class in HTML, but write style rules in CSS.
Application of Style Rules
Let us apply a style rule for highlighting some passages. We may choose any name for Class, but we'll choose hilite. So, we write the following Style Rule:
/* Highlight Text */
.hilite{ background-color:yellow; }
Now, look at the following paragraph:
We are living in an era of quantum change—leaving behind old patterns of being and institutions that no longer serve our needs or support our emerging consciousness. <span class="hilite"> At this pivotal time,</span> in humanity’s evolution, we need courage, commitment, and a supportive community of like-hearted souls to guide the way in transforming society.
The style class is applied to any text that is inside tags that contain class="hilite."
Below is what goes in HTML code:
<span class="hilite"> and close with </span>
Note:The <span> tag is much like the <div> element, but <div> is a block-level element and <span> is an inline element.
Below is what goes in CSS code:
/* Highlight any span of text */
.hilite{ background-color:yellow; }