Say that you want mostparagraphs in your document to be black, but you
want to emphasize a few paragraphs by displaying them in red text. It’s easy
to do that by adding a class definition to a selector, like this example. Here I
define a bodytextclass and an alertclass for the pselector:
p.bodytext {color: black;}
p.alert {color: red;}
Object-oriented computer languages use a similar punctuation when specify-
ing classes and their properties — dividing the code using periods to separate
class from property.
Use whatever word you want as a class name. Instead of p.alert, you can
use p.emphasisor p.bridgetteor whatever. The only requirement is that
once you’ve defined the style using a particular term, you must later use that
same term again when you invoke that class in the HTML. If you’ve defined a
red text paragraph as p.alertin your style sheet, any time you want to
invoke it in your Web page code, you must refer to it as p class “alert”).
Also, reading your code is obviously easier if you choose terms that have
some meaning relating to the end result. For this reason, I suggest that you
avoid naming your classes Bridgette.
When choosing a name for a class, try to name it after what it does rather
than how it looks. Instead of using p.redabove, I used p.alertbecause
alerting the reader with red text is the behavior or purpose of this class, not
merely its appearance. I could later decide to make all alerts boldface instead
of red. Having named this class red would be a problem if I later did change
this style to boldface. I couldn’t sensibly allow class=redto turn text bold-
face and leave it black. To keep the code understandable, I would have to go
through the entire HTML code for my Web site and change each and every
use of the class name redthroughout the HTML files. That would be defeat-
ing the purpose of one of the primary values of CSS: That you don’t have to
search and replace through an entire Web site to make changes to the
appearance of your various styles.
After you’ve specified your members of the pselector class, you can refer to
them in your HTML document like this:
<p class=”bodytext”>
This one is black.
</p>
<p class=”alert”>
This is red.
</p>
36 Part I: The ABCs of CSS
