HTML and CSS Reference
In-Depth Information
Example 2.10: CSS statements for heading styles
<!DOCTYPE html>
<html>
<head>
<title>Example 2.10</title>
<style type="text/css">
body { text-align: center; }
h1 { font-family: sans-serif; }
h2 { border: 2px solid black; padding: 10px; }
h3 { font: bold italic 18pt Comic Sans MS; }
h4 { color: white; background-color: darkgrey }
h5 { visibility: hidden; }
h6 { letter-spacing: 1.5em; }
</style>
</head>
<body>
<h1>
Level 1 Heading
</h1>
<h2>
Level 2 Heading
</h2>
<h3>
Level 3 Heading
</h3>
<h4>
Level 4 Heading
</h4>
<h5>
Level 5 Heading
</h5>
<h6>
Level 6 Heading
</h6>
</body>
<html>
Notice that the space formerly occupied by the level-ive heading is pres-
ent in Figure 2.10, but the text is invisible. his is diferent from giving the
element's
display
property the value none, which efectively sets the height,
width, and element margins to 0. Although Example 2.10 has only one heading
of each level, the styles used would apply to all headings if there were more on
the page. Every level-two heading on the page, for example, would have a black
border. If a unique style is needed for one and only one heading, either an
id
attribute should be added to that heading, or a
style
attribute should be used
to set the element's CSS properties directly within the start tag. For example,
this code:
<h1 style="font-family: sans-serif;">
Level 1 Heading
</h1>
