How to Make a Horizontal Line in External Cascading Style Sheets

You don't have to use an image-editing program to create colorful lines for your Web pages. Lines and shapes -- when placed strategically -- can add interest to websites and help you organize and separate information on crowded Web pages. Using an external cascading style sheet, you can turn any browser into a drawing machine which lets you place customized horizontal lines anywhere you like on any Web page.

Instructions

1. Open Notepad and paste the following code into a new document:

   div.line {
   background-color: Blue;
   width: 200px;
   height: 2px;
   }

   This CSS code defines the attributes for the div you will use to create your horizontal line. The background-color attribute sets the line's color. The width and height attributes determine the line's width and height in pixels. Change the width and height values to anything you like. Replace "Blue" with any valid HTML color name. Find valid color HTML color names on the Web by searching for HTML color names.

2. Save the document with a file extension of ".css." Doing this creates an external cascading style sheet.

3. Launch any HTML editor and open one of your HTML documents.

4. Paste the code shown below into the document's head section:

   <link href="STYLE_SHEET_NAME.css" rel="stylesheet" type="text/css" />

   Replace "STYLE_SHEET_NAME.css" with the name of the style sheet you saved. Adding this code adds the style sheet to your HTML document.

5. Find the document's body section and paste the following code where you want your line to appear:

   <div class="line" />

   This single line of code creates the line you defined in the external cascading style sheet.

6. Save your document and view it in a browser to see the line on your Web page.

Tips & Warnings

• Make a horizontal line cover the width of your Web page by changing its width value to "100%."

• Place as many lines as you need on your Web pages by adding the div code shown previously to your code.

• Make thicker lines by increasing the width value in the external cascading style sheet.

References

• World Wide Internet Consortium: Style Sheets in HTML Documents

Resources

• W3Schools: HTML Color Names