Adding Horizontal rules - HTML5 - page 94

default is displayed as a line that extends the full available width of the containing element as shown
in Figure 12-1.
FiGure 12-1
sizinG and sTyLinG ruLes
The style attributes formerly associated with the horizontal rule — align, color, noshade, size, and
width — were deprecated in the prior HTML recommendation, 4.01. In HTML5, all stylings are
handled through CSS. In this section, you learn how to control the traditional look-and-feel of the
horizontal rule as well as replace the standard line with an image.
As noted earlier, when an <hr> tag is inserted into a page without additional styling, a line that
expands the full width of the containing element is rendered. If you wanted to shorten the line by
half and center it, your CSS would look like this:
hr {
width: 50%;
margin: 0 auto;
}
By setting width to 50% , you ensure that the horizontal line is half of the container width ; you can,
of course, also set width to a fixed pixel value. You'll recall that the margin property declaration is
the standard method for centering an element.
By default, the <hr> tag aligns left, but if you'd like to align it to the right, you
can use a variation of the margin property again, like this: margin: 0 0 0 auto .
That zeros out all the margin values, except the left, which is defined to automati-
cally calculate the needed margin to fill the space given the <hr> tag's width.