CSS Classes

The class selector allows you to style items
within the same (X)HTML element differently.
Similiar to what I mentioned in the
introduction about inline styles. Except with
classes the style can be overwritten by
changing out stylesheets. You can use the
same class selector again and again within
an (X)HTML file.
To put it more simply, this sentence you are
reading is defined in my CSS file with the
following.
p {
font-size: small;
color: #333333
}
Pretty simple, but lets say that I wanted to
change the word “sentence” to green bold
text, while leaving the rest of the sentence
untouched. I would do the following to my
(X)HTML file.
<p>
To put it more simply, this <span
class=”greenboldtext”>sentence</span> you
are reading is styled in my CSS file by the
following.
</p>
Then in my CSS file I would add this style
selector:
.greenboldtext{
  font-size: small;
color: #008080;
font-weight: bold;
}
The final result would look like the following:
To put it more simply, this sentence you are
reading is styled in my CSS file by the
following.
Please note that a class selector begins with
a (.) period. The reason I named it
“greenboldtext” is for example purposes, you
can name it whatever you want. Though I do
encourage you to use selector names that are
descriptive. You can reuse the “greenboldtext”
class as many times as you want.