Articles Tutorials Work at Home Entrepreneurs, Webmasters, Small Business Owners
Articles Tutorials Work at Home Entrepreneurs, Webmasters, Small Business Owners
Articles & Tutorials for Work at Home Entrepreneurs
Webmasters and Small Business Owners
Get More >

Newest Articles 
Search Engine Marketing
Internet Marketing
Affiliate Marketing
Email Marketing
Viral Marketing
Webmaster Resources
Business Resources
Make More Money
CSS
Web Design
Graphic Design
Color Theory
Product Reviews
Time Management
Business Ethics
Promotional Strategies
Glossary of Terms
Direct Mail Marketing
Telemarketing
Product Sourcing



Link to Us!

CSS
Email this article  :  Printer friendly page

Dotted, Dashed and Solid Line Separators

Creating border lines or separators is easy with CSS. To illustrate what we mean, let's first use our homepage as an example: http://www.basictemplates.com/. Do you see the solid line around the section at the top stating "Total Templates for Members' Access: 595 - Date of Last Additions: 05.12.2003"? This is not a table border coded in HTML. It is CSS at work within a table cell <TD> tag. The solid line could easily be changed to a dotted or dashed line by changing the following code in the style sheet. The same is true for the border color, background color and width of the line.

In the examples below we are using code for custom classes we have created for external style sheets. 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?"

The before and after effects illustrates how quickly you can change the cosmetic appearance of this effect.

Before:
.btback1 { border: #B0AA93; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; background-color: #CFCCBE}

After:
.btback1 { border: #000000; border-style: dashed; border-top-width: 2px; border-right-width: 1px; border-bottom-width: 2px; border-left-width: 1px; background-color: #FFFFFF}

Here is what we did. We changed the border color from a dark tan (before) to black (after), changed it from a solid to a dashed line ( "dotted" could also have been used instead), made the top and bottom width of the line 2 pixels wide, and changed the background color to white. An example of what this table cell <TD> tag now looks like can be found HERE (first example). The example page shows an inline style (used only by that page) for the table's <TD> tag. Check the source code. You will see the following code assigned to the TD tag:

td class="btback1"

(Note: Be sure you use the TD tag because this style block is not rendered correctly by Netscape if you use a TR or TABLE tag instead).

We recommend using "external" style sheets so that all of your web pages can use the classes you create. Should you decide you wanted a red border at a future date, you simply change the black color code to red in the external style sheet and it is changed throughout your site automatically. If you used standard HTML for these effects, you would have to change it individually on EVERY page where it appeared! Argh!

This method can be used as separator lines too. Simply change the top, right, bottom and/or left border width to 0px to eliminate the borders that you do not wish to show.

But let's not stop there. This border/separator code can also be assigned to any HTML tag; naturally some HTML tags are more appropriate than others. For example, assign this code to a paragraph <P> tag and the second example on THIS PAGE will show you the results. Pretty neat, but wait!

The text is up against the table border. That is ugly and unprofessional, right? Not to worry. This is the perfect example of where the padding style can be used. If you do not want the padding in all of the areas that use this style block, create another custom style as we did (see the source code of the example page) and add the padding code to it. Then assign the paragraph <P> tag with the new style. We added 4 pixels of padding to the right and left.

Before:
.btback2 { border: #000000 dashed; background-color: #FFFFFF; border-top-width: 2px; border-right-width: 1px; border-bottom-width: 2px}

After:
.btback2 { border: #000000 dashed; background-color: #FFFFFF; border-top-width: 2px; border-right-width: 1px; border-bottom-width: 2px; padding-top: 0px; padding-right: 4px; padding-bottom: 0px; padding-left: 4px}

Note: There are shortcuts to writing this code. However, for illustrative purposes and so as not to confuse folks new to CSS, we have shown the long version.

The last example we are showing illustrates how these style blocks can be assigned with the link <A> tags. Hmmm ... are you now getting the idea of the vast possibilities here? See the third example on this page, and don't forget to check the source code of the example page.

If you don't have time to learn to write CSS code, would you find a simple copy/paste snippet resource valuable? At BasicTemplates.com we provide our members with pre-coded snippets of CSS code plus 100s of custom coded, pre-developed style sheets ready-to-go. Find out more at www.basictemplates.com

Copyright © 1994-2006 by BasicTips.com, a division of BasicTemplates.com, CSS HTML Web Site Templates with Exernal CSS and Removable Graphics. If you found our articles helpful, subscribe to our newsletter and get articles like this delivered to your inbox - FREE.

Order soon and get up to 5 FREE domains & more!
Host 6 Domains on 1 Account
5000MB and 400GB for $6.95 a month!

 

Page copy protected against web site content infringement by Copyscape
All articles are originally authored by BasicTemplates.com. Reprints in whole or in part are not permitted. See Copyright Notice

Copyright © 1994-2006 BasicTips.com, a division of BasicTemplates.com, Web Site Templates with External CSS
The Internet's #1 Choice for HTML CSS Web Templates via a Membership. Designed using External CSS and Removable, Swap-Out Graphics.
Basic Web Templates | Website Templates | HTML CSS Templates | Web Design Templates | Web Site Templates