Printed from BasicTips.com, FREE helpful articles and tips for Webmasters and Business Owners
Copyright © 1994-2006 by BasicTips.com, a division of BasicTemplates.BIZ
All rights reserved. Republication in whole or in part in any form is not permitted.

Sponsored by BasicTemplates.BIZ
Website Templates with External CSS and Removable Graphics
http://www.BasicTemplates.biz

Co-Sponsored by Effective-Website-Secrets.com
Teaching webmasters effective web development and marketing techniques via free podcasts.
http://www.Effective-Website-Secrets.com

Category: CSS
Horizontal Rules with CSS
By BasicTemplates with External CSS

We use external CSS in our articles as it is the most effective way to design a web site. If you are not familiar with the different methods of CSS and how or when to use them, be sure to read our article, "External, Internal or Inline? Which Method is Best?"

A horizontal rule using CSS is a quick and flexible way to control the height, width, and color. An example snippet of code is shown below. It can be added to your external style sheet easily; just copy/paste it. Modify the height, width and background color to suit your needs.


hr { height: 3px; width: 50%; background: #FF0000; }

The example code above specifies we want our horizonal rule 3 pixels high, 50% of the width of the web page, and colored red (#FF0000)

Then in your source code of our web page, type the standard HTML horizontal rule code <hr> where you want it to appear.