In my opinion, one of the most useful elements for making a page clear is the <hr>, or, as I call it, the ‘horizontal rule’. This, as with all other elements, can be styled with CSS, however you need to be careful, as different browsers style the <hr> differently.

Firstly, please observe this page: http://csstrickery.co.uk/TipsTutorials/stylinghr/examplewithouthr.html
Those paragraphs, although sperated by a line due to the nature of the <p> tag, could still be seen as one topic. Say, if I wanted to make it absolutely clear that each paragraph was completely unrelated to the other, the <hr> is the perfect tool for the job. All I need to do is add <hr /> (xHTML) after my first paragraph of text. Now, have a look, bearing in mind that the <hr /> has yet to be styled.

Using <hr> to divide text

Firstly I’m going to talk about how I feel is best to style a <hr> when dividing text. I would always, always have it center aligned. Although, it seems to center align all on its own, so we need not to worry. There are a couple of browser issues, as always, with the <hr>.

1. When setting the colour, you need to use color:, for IE and background-color:, for FF & Opera.
2. You can add a border for IE & FF, but Opera does not like it, giving weird results.
3. It’s best to stick to simply customising width and colour, as other properties can give odd results, and width and colour display the same in all browsers.

So, usually, when ’splitting’ a paragraph of text, I would do the following styling to the <hr>.

hr {
width: 80%;
color: #006699;
background-color: #006699;
}


View the Result.

Basically, I now leave it up to you to mess around with the styling. You can also style height, so you could have a 20px high <hr>, if you really wanted!

Categorised under: CSS, Design & Layout, Designing a Website, Tips & Tutorials by Jack F