Chapter 9: Spacing Out with Boxes 179
Horizontal lines are often quite useful as a way of
separating different logical areas of your Web
page. They can also look good--adding variety.
Readers appreciate it if you somehow zone off a
page with a fair amount of text. Headlines and
subheads help with this, as do borders and
background colors or textures. But one of the best
ways to indicate that a group of paragraphs
belongs together logically is to simply insert
horizontal lines as needed.
<hr>Now, on a completely different subject, blah blah lines are
often quite useful as a way of separating
different logical areas of your Web page. They can
also look good--adding variety.Some CSS experts suggest using the top or bottom border properties of ele-
ments to provide horizontal rules, but I’ve never quite understood why. These
experts insist that you should always try to separate content, the HTML, from
presentation, the CSS, but that seems extreme to me. After all, such elements
as for italics are surely easy to embed within body text, rather than set-
ting up a CSS rule for the same effect. The experts further argue: “What if you
decided to change italics to some other method of emphasis?” My answer to
that is threefold: You should always use only italics for emphasis. But if you
are ever faced with going through and changing each tag to a different
element, how hard is it to use a search and replace utility to globally make the
change throughout your code? It only takes a few seconds, so what’s the big
deal? And lastly, if you don’t like search and replace, you could alternatively
redefine the element by creating a new CSS rule with ias the selector,
right? Anyway the
element works just fine for adding lines. If you provide
a percentage width for it, as in the preceding example, the line is the right size
in relation to the parent element. Generally, limiting a dividing line to around
80 percent of the parent is best, as shown in Figure 9-11.
You can use most of the CSS properties you’d expect with
, including, in
the example above, a little bit of top-marginto space the line nicely below
the first paragraph.
Although a plain, black, or gray line usually suffices, if you wish, you can fiddle
around with the shape and size of your dividing line, like this, where the mar-
gins, height, width, and color are all changed from the previous example:
hr {margin-top: 3px;
margin-bottom: 5px;
height: 14px;
width: 60%;
background-color: mediumspringgreen;
}