HTML and CSS Reference
In-Depth Information
14.7.2 Using a Specific Class Selector
In previous examples we have defined a class style that can be used by all HTML ele-
ments. The following class can be applied to all HTML elements:
.center {text-align: center;}
With a class selector you can define different styles for a specific HTML element. For
example, if you want different styles for just the <p> tag, you can specify a class descrip-
tion by appending a dot to the element followed by the class name:
p.right {text-align: right}
p.center {text-align: center}
/* These classes apply only to the paragraph element */
When the class selector is applied to a style, then you use the class attribute in your
HTML document as follows:
<p class="right">
This paragraph will be right-aligned.
</p>
<p class="center">
This paragraph will be center-aligned.
</p>
Note: To apply more than one class per given element, the syntax is:
<p class="center bold">
This is a paragraph.
</p>
This paragraph will be styled by a class called “center” and a class “bold”.
EXAMPLE 14.15
<html>
<head>
<style type="text/css">
1
p.normal-cursive {
font-variant: normal;
font-family: cursive
}
2
p.small { font-variant: small-caps }
</style>
</head>
<body bgcolor=tan>
3
<p class="normal-cursive"> This is a paragraph</p>
4
<p class="small"> This is a paragraph</p>
</body>
</html>
 
 
Search WWH ::




Custom Search