Configuring Color and Text with CSS - Web Development and Design Foundations with XHTML - page 91

you use the class selector . For example, perhaps you would prefer if the paragraph
containing the navigation area information in embedded2.html was displayed with
large, bold text. When setting a style for a class, configure the class name as the selec-
tor. Place a dot or period (.) in front of the class name in the style sheet. The following
code configures a class called nav in a style sheet.

.nav { font-weight: bold;
font-size: 1.25em;

}

The styles set in the nav class can be applied to any XHTML element you wish. You do
this by using the class attribute , such as class="nav" . Do not write the dot in front
of the class value in the XHTML tag where the class is being applied. The following
code will apply the nav class styles to a <p> element:

<p class="nav">This paragraph will be displayed using the styles in
the nav class.</p>

FAQ

Why is the class called nav ?

You can choose almost any name you wish for a CSS class. However, CSS class names are
more flexible and easier to maintain over time if they are descriptive of the structure rather than
of specific formatting. For example, a class name of largeBold would no longer be meaning-
ful if the design was changed to display the area differently; but a structural class name such as
nav , logo , footer , content , or subheading is meaningful regardless of how the area is
configured. Here are more hints for class names:
● Use short but descriptive names.
● Avoid class names that are the same as XHTML element names—they could be confusing
to anyone working on the page.
● Both letters and numbers may be used.
● Avoid spaces in class names.
● Class names are not case sensitive, but consistency will make page maintenance easier.

A final tip about CSS classes is to be wary of “classitis”— that is, creating a brand new
class each time you need to configure text a bit differently. Decide ahead of time how
you will configure page areas, code your classes, and apply them. The result will be a
more cohesive and better organized Web page.

The Id Selector
Use an id selector instead of a class selector if you plan to identify and apply a CSS
rule uniquely to a single area on a Web page. For example, perhaps you would prefer
if the paragraph containing the copyright information in the page footer area of
embedded2.html was displayed with small italics text. While a class selector could be
used, an id selector is more appropriate if your page layout contains a single footer
area. For example, you can create a style for an id named footer to configure the