Classes

Class selectors work in the exact same way as id selectors, however, instead of applying to a unique element, a class should apply styles to a group of similar or the same elements.

Key Points

Classes allow for a group of elements to have the same style.

Class selectors start with a full stop (.).

Using a Class to style a group of elements

In the below example, there are three different text elements. Each element has been assigned a class with the aim of making all three text elements red.

The CSS rule for a Class starts with a .:

.redText

Any element with the class ‘.redText’ will have the rule ‘color: red’ applied to it.

HTML

<h1 class="redText">Heading</h1>

<h3 class="redText">Sub Heading</h3>

<p class="redText">Information</p>

CSS

.redText{
    color: red;
}

National 5 Requirements

You should be able to explain the use of a Class.

You should be able to implement Classes into your websites.