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 1: Padding & Margins
By BasicTemplates with External CSS

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 week's style sheet article. 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 article is the first in our series of "CSS Shorthand" which we are publishing. This tutorial focuses on the padding and margin shorthand technique. Sample code for the full and shorthand methods are shown below for comparison purposes.

Important: It is very important that you think of the progressive flow of the shorthand properties as being clockwise: top, right, bottom, left.

Padding
Margins

Full method:
.yourclassname {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}

Shorthand method:
.yourclassname {
padding: 5px 10px 5px 10px;
}

Full method:
.yourclassname {
margin-top: 15px;
margin-right: 30px;
margin-bottom: 18px;
margin-left: 33px;
}

Shorthand method:
.yourclassname {
margin: 15px 30px 18px 33px;
}

Related Article: "CSS Shorthand, Part 2: Borders"