CSS Shorthand, Part 1: Padding & Margins

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.