Using classes with CSS
The use of classes is also very common when creating webpages. Classes operate in a similar way to element IDs but rather than relating to the id of an individual element, styles for a class can be applied across a range of elements.
In the last example, the first paragraph was assigned a unique id and the related style was applied using the CSS # selector.
In this example, paragraphs two and three make use of a class known as mainbody. This class style can be defined as follows:
.mainbody {color: red;font-size: 16px;font-family: Arial;}The symbol used for class selectors is . and comes before the name of the class. In the example, lines 2 and 3 now make use of the mainbody class.
<body><p id="introduction">All text for paragraph 1 would go here</p><p class="mainbody">All text for paragraph 2 would go here</p><p class="mainbody"=>All text for paragraph 3 would go here</p></body>Paragraph one would display on screen in the style defined for the introduction id and paragraphs two and three would appear on screen with the style defined for the mainbody class.