Borders

Below is an example of CSS code we can use to control the appearance of a border.

border-width: 1px;
border-style: solid;
border-color: #CDCDCD;


A simpler way to deal with these settings is to use the “border” shorthand.

border:1px solid #CDCDCD;

The exact order of width, style, color isn’t strictly required and using the values in different orders should work fine but if you notice something funky going on then you might want to check your order as it might be something simple like that if the browser is particularly strict. It should be noted that the properties above are actually shorthand themselves but when was the last time you used border-left-width: 1px? I can’t say I have often but perhaps i’m not daring or cool enough to have ultra modified borders.

Backgrounds

Another common use of shorthand is dealing with background. Instead of “background-color”, “background-image”, background-repeat”, “background-attachment” and “background-position” we can just use the rather obvious “background”.

background-color: #fff;
background-image: url(images/bg.jpg);
background-repeat: repeat;
background-attachment: fixed;
background-position: 0 0;


Can be more easily maintained as:


background: #fff url(images/bg.jpg) repeat fixed 0 0;


If you don’t specify a value in each case then defaults will be assumed. In many instances these are fine. If you’re only interested in making a background into a certain colour then you aren’t particularly worried about “image: none” being assumed as it will have no effect on you. The defaults are:

Margin and Padding

Margin and padding are used extensively within CSS and I can’t recall ever creating a stylesheet that didn’t contain margins and padding in many different places. Because of this I find using the shorthands makes life a lot easier and saves a lot of space in the file.

It is important to remember TRemBLe or TRouBLe when dealing with margins and padding. The uppercase letters standing for Top, Right, Bottom, Left. This is the order in which the shorthand is written.

Instead of:

margin-top: 5px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;


We can instead type:

margin: 5px 20px 10px 20px;

The smarty pants amongst us may have noticed that in the above example right and left are both 20px. Is there a way to group them to make our declaration even shorter? Well yes there is. Top and bottom, and Right and Left can be grouped together if desired.
margin: 5px 20px 10px;

You can of course cut it down from 3 to 2 to 1 depending on what you want to do:

Top and bottom – 5px, Right and left – 20px

margin: 5px 20px

Everything 5px

margin: 5px

Fonts

Last but not least for this introduction to shorthand are Fonts.

font-style: normal;
font-variant: small-caps;
font-weight: bold;
font-size: 2em;
line-height: 2.4em;
font-family: Arial,sans-serif;


Can just as easily be written as:

font: normal small-caps bold 1em/1.2em Arial,sans-serif;

As mentioned with background above, there are some default settings that will be assumed if you don’t specify them yourself. Again it depends on whether the default interferes with what you want to do. In some cases it will be what you want or won’t be of interest.

Summary

When learning CSS it’s often a good idea to start out by writing in full instead of shorthand. Indeed I would say I have a fairly decent grasp of CSS but I do still often tend to write in some shorthand and in full in other places. This is for a combination of reasons. Often its just a by product of the design and trying things out at the time to see what happens. A good exercise is to go back to the CSS file after you’ve tested and a put a site live to see if it can be slimmed down and reorganised. I should probably follow my own advice when I get some time!