HTML and CSS Reference
In-Depth Information
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>
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
Search WWH ::

Custom Search