HTML and CSS Reference
In-Depth Information
To change the thickness of an <hr> with CSS, use the
height
attribute, which I'll discuss
in Lesson 8, “Using CSS to Style a Site.”
The
width
attribute specifies the horizontal width of the rule line. You can specify the
exact width of the rule in pixels. You can also specify the value as a percentage of the
browser width (for example, 30% or 50%). If you set the width of a horizontal rule to a
percentage, the width of the rule will change to conform to the window size if the user
resizes the browser window. Alternatively, you can use the
width
CSS property instead.
I'll also talk about width in the following lesson. Figure 7.8 shows the result of the fol-
lowing code, which displays some sample rule line widths:
Input
▼
<h2>
100%
</h2>
<hr />
<h2>
75%
</h2>
<hr width=”75%” />
<h2>
50%
</h2>
<hr width=”50%” />
<h2>
25%
</h2>
<hr width=”25%” />
<h2>
10%
</h2>
<hr width=”10%” />
.
Output
FIGURE 7.8
Examples of rule
line widths.
If you specify a
width
smaller than the actual width of the browser window, you can also
specify the alignment of that rule with the
align
attribute, making it flush left
(
align=”left”
), flush right (
align=”right”
), or centered (
align=”center”
). By default,
rule lines are centered. The
align
attribute has been removed from HTML5 for all ele-
ments that once supported it. Aligntment will be covered in the following lesson.
