Adding Horizontal rules - HTML5 - page 95

If you want to color your horizontal rule, you'll need to combine two properties to cover a full range of
browsers. Rather than just define the color or background-color properties, declare both, like this:
color: red;
background-color: red;
To make a taller line, use the height property instead of the older size attribute. For the height
value, you can use pixels, ems, or percentages. Figure 12-2 shows a 3-pixel high, purple, centered
horizontal rule with a 75% width, though obviously you can't see the color in the figure.
FiGure 12-2
Replacing the default line with an image requires three properties: one to link to the image, another
to make room for the image, and a third to disable the line.
The background property is used to identify the source of the graphic. As noted in Lesson 10,
the background property can combine background-image , background-repeat , and
background-position , like this:
hr {
background: url(“images/saturn_outline.gif”) no-repeat center center;
}
Because the default height of the <hr> tag is typically just a pixel or two, unless your image is very
small, you won't be able to see it without adding a height property. The height value should be
the same as that of the image itself. For example, if my image is 100 pixels wide by 50 pixels tall, I
would insert this declaration:
height: 50px;
To make sure only the image is displayed, combine the previous two properties with a border:
none declaration, as in this example:
hr {
background: url(“images/saturn_outline.gif”) no-repeat center center;