Horizontal Rules and How to Style Them
Oh, the <hr>. It’s one of those HTML tags that’s been around forever, but you never give much thought to. Until today.
<hr> stands for horizontal rule, and are a good choice when you have a lot of content on a single page. Using them can increase readability, by signifying to your reader that a new topic or section is about to begin- and visually, by giving the reader’s eyes a rest.
Yes, horizontal rules are a good thing, except that how they look relies mostly on the browser the website is being displayed in.
In the past, you could style <hr> tags with definitions such as align, size and width, but these are- thankfully- deprecated now, and so we turn to CSS.
Prettifying your <hr>s with CSS
First of all, you always want to close your <hr>s like so:
There is no “open” tag, so think of this like a <br /> tag. It stands alone.
Here are some of the more common definitions you can use for styling:
- height : to adjust the rule’s thickness.
- width : the width of the rule. Use pixels or percentages.
- background : set the color of the rule.
- margin : to adjust the horizontal alignment of the rule.
For example, to get a rule like this:
add the following to your stylesheet:
The possibilities, of course, are many- you can use background images, borders (you’ll want to use border-top for this), and for clearing previous floats.
Learn more about the <hr> tag at the w3.