Adding Lines

A horizontal line, or horizontal rule as it is named in HTML, is one of the easiest tags to use. You can insert the <hr /> tag anywhere in your document to insert a horizontal line that extends across the space available. Take a look at the following sample HTML. It shows three <hr> tags: two used as a section break between text and the other used inside a table cell. Figure 5.5 shows how they appear in the browser.

<!DOCTYPE html      PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"        xml:lang="en" lang="en"> <head> <title>Horizontal Lines</title> <style type="text/css"> td {text-align=center} </style> </head> <body> <p>This is a horizontal line.</p> <hr /> <p>This is another horizontal line.</p> <hr /> <table width="50%" rules=cols>   <tr>    <td>This is also a<hr />horizontal line.</td>    <td>There is <br />no line on this<br />side        of the table.</td>   </tr> </table> </body> </html>

Figure 5.5. The `<hr />` tag inserts a horizontal line that stretches across the available horizontal space.

Adding Style to Horizontal Lines

As with other HTML tags, you can use style sheet properties to design your own horizontal rules. You can set the height, width, and color of the line to match the design of your Web page. The following HTML sample shows two different styles attached to the <hr /> tag. If I use the HR.red style, I see a red line that takes up 50% of the horizontal space. If I use the hr.purple style, I see a purple line that is 4 pixels high and takes up 75% of the horizontal space.

<style type="text/css"> hr.red {color:red;          width:50%} hr.purple {color:purple;              height:4;              width:75%} </style>

I've used both of those styles in the following sample HTML. Figure 5.6 shows you how those examples look in the browser.

<!DOCTYPE html      PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"        xml:lang="en" lang="en"> <head> <title>Horizontal Lines</title> <style type="text/css"> td {text-align=center} hr.red {color:red;          width:50%} hr.purple {color:purple;              height:4;              width:75%} </style> </head> <body> <p>This is a plain horizontal line.</p> <hr /> <p>This is a purple horizontal line.</p> <hr  /> <table width="50%" rules=cols>   <tr>    <td>This is a red <hr  />horizontal line.</td>    <td>There is <br />no line on this<br />        side of the table.</td>   </tr> </table> </body> </html>

Figure 5.6. Applying styles to the `<hr />` tag changes the appearance of the horizontal line.

Margin Styles

Style sheets give you another important advantage: You can specify the margins of almost any HTML element. The margins can be defined in pt, in, cm, or px sizes.

body {margin-left: 100px;      margin-right: 100px;      margin-top: 50px}

You can set the margin-left, margin-right, and margin-top properties individually or combine them into one property called margin that applies the sizes to the top, right, and left margins.

body {margin: 100px 100px 50px}

The sample CSS document from Microsoft's CSS Gallery (which you looked at earlier) also specifies margins for the text elements. Try it on your documents.

<style type="text/css"> body {background: coral } .subhead { color: black;     font-size: 28px;     margin-top: 12px;     margin-left: 20px;     line-height: 32px;     font-family: Impact, Arial Black, Arial,                   Helvetica, sans-serif} </style>

Tip

Check out the following style sheet references for more help:

http://webdeveloper.com/html/html_css_1.html Web Developer's CSS tutorial
www.w3.org/TR/REC-CSS2/propidx.html W3C's list of CSS properties
http://www.microsoft.com/typography/default.mspx Microsoft's CSS tutorial

Table 5.4 lists the HTML tags that were discussed in this lesson.

Table 5.4. HTML Tags Used in This Lesson
HTML Tag	Closing	Description of Use
`<hr />`		Creates a horizontal line.
`<style>`	`</style>`	Surrounds style sheet properties, or references to external style sheets. The standard open tag should be `<style type=_"text/css">`.

In this lesson, you've learned:

The CSS recommendation describes three types of style sheets: embedded, inline, and linked.
Three different style sheets exist in HTML: embedded, inline, and linked.
If multiple style sheets are applied to your HTML document, the browser applies the styles of the inline style sheet first, and then the linked style sheets, and then embedded style sheets.
The <hr /> tag adds a horizontal line to your HTML document. Use style sheet properties to adjust the color, width, and height.
Remove the underlining on your hyperlinks by adding the text-decoration:none declaration to your a style tags.

Figure 5.5. The <hr /> tag inserts a horizontal line that stretches across the available horizontal space.

Adding Style to Horizontal Lines

Figure 5.6. Applying styles to the <hr /> tag changes the appearance of the horizontal line.

Margin Styles

Table 5.4. HTML Tags Used in This Lesson

Figure 5.5. The `<hr />` tag inserts a horizontal line that stretches across the available horizontal space.

Figure 5.6. Applying styles to the `<hr />` tag changes the appearance of the horizontal line.