You might have seen so many horizontal rules on web pages. They can enhance the readability of a web page as they separate various topics on the page. They also indicate a clear separation of footer or resource box presented at the bottom of the page from the main content. Using HTML, you can create simple horizontal rules. But they are not very appealing. Therefore, many web designers are forced to make use of graphic images as horizontal rules instead. CSS resolves this problem by making the task of building attractive rules easy. You can employ style sheets to create custom rules which can be downloaded very fast. They are equally compatible with the page layout and the color pattern of your page.

The horizontal rule, </hr> tag, still has its presence in HTML 4.0, but all of its properties like align, noshade, size and width have been denounced. It means you can not expect them to act properly in future versions of HTML. That is the reason why it is imperative to learn how to lay down the appearance of your horizontal rules with CSS. Two fundamental things you can set are the height and width as shown below. In the example underneath, the width is set to 75 percent of the width of the horizontal rule’s containing element, which is by and large the webpage.

<hr style=”width:75%;” </hr>

<hr style=”height:6px;” </hr>
The above examples use inline style code. The example below uses an embedded style code block to form a dotted line horizontal rule.
<style type=”text/css”>
#dothr
{
border-style:none;
border-top: 2px dotted black;
border-bottom: 2px solid white;
height: 4px;
}
</style>
<hr id=”dothr”</hr>

The example below uses an embedded style code block to create a dashed line horizontal rule.
<style type=”text/css”>
#dashr
{
border-style:none;
border-top: 1px dashed black;
border-bottom: 1px dashed gray;
height: 2px;
}
</style>
<hr id=”dashr”</hr>

The alternatives are aplenty when you define horizontal rules with CSS. Some of the most common alternatives are height, width, background and margin. The ‘height’ property deals with the thickness of the rule. The ‘width’ property specifies the width of the rule across the browser window. It is set it in pixels or as a percentage. The ‘background’ property mentions the color of the horizontal rule. The ‘margin’ property is used to control the horizontal alignment of the custom rule. You can’t use right, left or center like you do in regular HTML, so you will in all probability have to play with this to get it to display properly.

Below is an instance of a horizontal rule using CSS:

<STYLE>
HR {
height:10px;
width:30%;
background:#446791;
margin: 0px 150px 0px 150px;
}
</STYLE>

This specification creates a dark blue horizontal rule that is 10 pixels high, occupies 30% of the browser window and is centered on the page. If you want to right or left-justify the line, you will need to experiment with the margin specifications to find what looks best for your page.
When you replace with your standard horizontal rules or graphic images with CSS-defined horizontal rules, you will be benefited in quite a lot of ways. It is a hassle-free technique to get relaxed placing CSS elements on your page without ruining your page layout. Less graphic images point to that your visitors will be able to observe your page more speedily. Lastly, your page becomes more standards-compliant, so there will be an improved display in the new generation of browsers.

Tags: CSS Style Horizontal Rules