The class selector allows you to style items within the same (X)HTML element differently. This is similar to inline styles, except with class the style can be overwritten by changing stylesheets. You can use the same class selector over and over again within an (X)HTML file.
For example, let’s define the sentence “This is an example” with the following,
p {
font-size: small;
color: #333333;
}
Now, lets change the word “example” to orange bold text, while leaving the rest of the sentence untouched. We would do the following to the (X)HTML file.
<p>This is an <span class=”orangeboldtext”>example</span>.</p>
Then in the CSS file, we would add this style selector:
.orangeboldtext {
font-size: small;
color: #FF5A00;
font-weight: bold;
}
The final result would look like this:
This is an example.
Note that a class selector begins with a (.) period.
