HTML and CSS Reference
In-Depth Information
EXAMPLE
14.13 (
CONTINUED
)
<body>
6 <p>The text in this paragraph is green and the point size
is 16. The font family is <em>arial</em>.</p>
7 <
p class="bigfont"
> This paragraph has a bigger font and is
dark blue in color.</p>
8 <p>The font style is specified as a class called
<em>.bigfont</em>.</p>
9 <
h1 class="bigfont"
>Testing the Class on an H1 Element</h1>
10 <
p class="teenyfont"
>Is this a small font?"</p>
<p>Let's start a new paragraph. This is green with a font
size of 16. What style is in effect here?</p>
</body>
</html>
EXPLANATION
1
The style is defined in the
<head>
of the document.
2
The CSS starts here.
3
A rule is defined for the paragraph (
p
selector). All paragraphs will have a right
margin, 30% in from both left and right. The Arial font will be 12 point and forest
green.
4
A class selector called
.bigfont
is defined. Class names start with a period. When
used on an HTML element, the font will be extra large, dark blue, and bold.
5
The class selector called
.teenyfont
is defined. All HTML elements that use this
class will have a small, italic, black font.
6
The paragraph is styled according to the rule on line 3.
7
This paragraph is assigned the
bigfont
class. The text will be in the style defined
for this class on line 4.
8
This paragraph reverts to the style rule on line 3.
9
The
<h1>
tag is using the
bigfont
class defined on line 4.
10
The
<p>
tag is using the
teenyfont
class defined on line 5. See Figure 14.14.
