HTML and CSS Reference
In-Depth Information
EXAMPLE
14.4
<html>
<head><title>Fonts</title>
<style type="text/css">
body { background-color: darkblue; }
1
h1 { color: yellow;
font-size:x-large;
font-family: lucida, verdana, helvetica;
}
2
h2 { color:lightgreen;
font-size:large;
font-family:courier;
}
3
h3 { color:lightblue;
font-size:medium;
font-family:helvetica; }
4
p { color:white;
font-size: 22pt;
font-style: italic;
font-family: arial;
font-variant:small-caps; }
</style>
</head>
<body>
<font size="+2">
<h1>My name is Papa Bear</h1>
5
<h2>My name is Mama Bear</h2>
<h3>and I'm the Baby Bear</h3>
<p>Once upon a time, yaddy yaddy yadda...</p>
</body>
</html>
EXPLANATION
1
The
h1
element will have yellow text and an extra-large font size from the Lucida
family of fonts. If that font is not available in this browser, Verdana will be used,
and if not Verdana, then Helvetica.
2
The
h2
element will have a light green, large, Courier font.
3
The
h3
element will have a light blue, medium, Helvetica font.
4
Paragraphs will have white text, with an italic, Arial font size of 22 points, all in
small caps.
5
The
<h2>
tag is displayed in its big style. See Figure 14.4.
