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
CSS Shorthand, Part 2: Borders
By BasicTemplates with External CSS

This is Part 2 of our "CSS Shorthand" article. Be sure to read "CSS Shorthand, Part 1: Padding and Margins" if you missed it. After you have learned the basic CSS rules, you will be amazed at the extensive potential cascading style sheets offers. I would highly recommend reading through most of our CSS tutorials so you can understand the basic concept prior to jumping into this CSS shorthand series. It will certainly make more sense to you especially if you are new to this web programming language.

Most of our tutorials refer to the External CSS method, because that is what we use in the development of our web templates and is the most logical way to design a functional web site interface for the end user (our customers and members). You may want to familiarize yourself with why "external" style sheets are the most effective way to design a web site (rather than internal or inline), by first reading our article, "External, Internal or Inline? Which Method is Best?".

This tutorial will focus on the border shorthand technique. Sample code for the full and shorthand methods are shown below for comparison purposes. The key elements of the border properties are: style, width and color. Important: It is very important that you think of the progressive flow of the border-width shorthand properties as being clockwise: top, right, bottom, left.

Borders
Alternate Border Values

Full method:
.yourclassname {
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-color: #0000CC #0000CC #0000CC #0000CC;
border-style: solid;
}

Shorthand method:
.yourclassname {
border: 2px #0000CC solid;
}

border-width:
em, px, pt (others are available but not within the scope of this tutorial)
Note: We recommend using "px" (pixels) for most web sites so your pages will appear on the majority of browsers as you intended.

border-style:
none, dotted, dashed, solid, double, groove, ridge, inset, outset

border-color:
Note: We recommend using the six-digit RGB (red, green blue) hex color code unless you are familiar with other ways of stating color values (which is also beyond the scope of this tutorial).

Examples:
#RRGGBB (#0000CC)
#RGB (#00C)
RGB (0,0,204)
RGB (0%,0%,80%)