HTML and CSS Reference
In-Depth Information
Using a class, for example, you could apply one style to a beginning paragraph and a dif-
ferent style to a closing paragraph on the same Web page.
Defining and using classes in CSS is a two-step process. First, any elements that
belong to the class are marked by adding the tag:
class=”classname”
where
classname
is the identifier or name of the class.
Any word can be used as a class name, as long as it does not contain spaces. In
general, however, you should use descriptive names that illustrate the purpose of a class
(for example, beginning, legallanguage, or copyrighttext), rather than names that describe
the appearance of the class (for example, bluetext, largeritalic, or boldsmallarial). Using
names that describe the purpose makes the code easier to read and more flexible. For this
chapter, you will use the class names align-left and align-right in the img element. This
immediately tells someone reviewing the code that the styles defined by those classes are
used to align images either left or right.
After you have named the classes, you can use the class names in a selector and
define a specific style for the class. For example, within the <style> and comment tags in
an embedded or internal style sheet, you enter a style statement in the format:
p.beginning {color: red;
font-size: 20pt;}
where the p indicates that the class applies to a specific category of the paragraph tag
and beginning is the class name. The tag and the class name are separated by a period.
Together, the tag and the class name make up the selector for the style statement. The
declaration then lists the property-value statements that should be applied to elements in
the class.
For instance, if you want to display the beginning paragraph text in a 20-point red
font, you would add a style statement like the one shown in the sample code in Figure 3-32
on the next page and then use the tag, <p class="beginning">, to apply the style defined by
the declaration associated with the p.beginning selector. If the paragraph <p> tag is used
without the class name, the paragraph appears in the default format or other format as
defined by a style. To use this class name in an HTML tag, you would type:
<p class=”beginning”>
as the code.
In addition to the style for the beginning paragraphs, Figure 3-32a shows an exam-
ple of HTML code with classes defined for and applied to the middle and end paragraphs.
Figure 3-32b shows how the resulting Web page appears in the browser.
You can add as many classes to your Web pages as you need. This is a very use-
ful Web development technique that allows flexibility and variety in a Web page. One
drawback is that classes can be defined for use only in embedded or external style sheets.
Because the purpose of using classes is to format a group of elements, not individual
elements, classes do not work in inline styles.
