H1, H2, H3, H4, H5, H6
Style Sheets give greater flexibility to the Heading
elements. Heading colors, sizes, fonts and indentation
may now be specified through the use of Style Sheets.
<STYLE TYPE="text/css">
BODY { background: white;
color : black;
font-family : Arial;
font-size : small;
}
H1 { font-style : italic}
H2 { text-indent : 2em }
H3 { background : yellow;
color : blue;
font-family : Arial;
}
</STYLE>
</HEAD>
<BODY>
<H1>H1 Heading</H1>
<P>
Regular text paragraph.
<H2>Indented H2 Heading</H2>
<H3>Blue Text / Yellow Background</H3>
|
H1 Heading
Indented H2 Heading
Blue Text / Yellow Background
|
To get the same effects with HTML 3.2 you would have to nearly stand on
your head. Even then you couldn't get the 'highlighter' line
behind the text and an invisible spacer gif would be necessary
to indent the H2 Heading.
<H1>
<FONT FACE = "Arial">
H1 Heading
</FONT></H1>
<P>
<FONT FACE = "Arial">
Regular text paragraph.
</FONT>
<P>
<IMG SRC = "1x1spacer.gif"
align = left
HEIGHT = 1
WIDTH = 10
ALT = "1x1 spacer"
BORDER = "0"
>
<H2>
<FONT FACE = "Arial">
Indented H2 Heading
</FONT></H2>
<BR CLEAR="all">
<P>
<H3>
<FONT FACE = "Arial"
COLOR = "#0000FF"
>
Blue Text / Yellow Background
</FONT></H3>
|
H1 Heading
Regular text paragraph.
Indented H2 Heading
Blue Text / Yellow Background
|
The spacer gif is a 1 pixel x 1 pixel transparent gif. The
HEIGHT/WIDTH attributes are set within the HTML to adjust
the amount of indentation. The BORDER attribute was set to
1 for display purposes. When using a transparent gif as a
spacer, set the BORDER to 0 (zero).
|
|
Additional Resources:
HTML 4.01 Tags
|
