HTML and CSS Reference
In-Depth Information
Finally, you will add a horizontal rule and an inline style to further enhance this
Web page. As discussed earlier in the chapter, horizontal rules are lines that act as divid-
ers on a Web page to provide a visual separation of sections on the page. You can use an
inline image to add a horizontal rule, or you can use the horizontal rule tag (<hr />) to
add a simple horizontal rule, as shown in the following steps. To make the horizontal rule
more apparent, you will give it a height of 8 pixels and color the background the same
color as the <h2> heading. You will also set the width of the horizontal rule to 50% of the
Web page. You do all three of those changes to the horizontal rule using an inline style.
Figure 2-30 shows examples of a variety of horizontal rules and the HTML code used to
add them. The default horizontal rule is shown in the first rule on the page. Dimension is
added to a horizontal rule by increasing the number of pixels that are displayed.
<p>Default hr</p>
<hr />
<p>hr with height = 10px</p>
<hr style=”height: 10px” />
various
sizes and
types of
horizontal
rules
<p>hr with height = 20px</p>
<hr style=”height: 20px” />
<p>hr with height = 20px and width = 800px</p>
<hr style=”height: 20px; width: 800px” />
Figure 2-30
