• Print Article
• Email Article
• Report it

Currently you might be styling margins like so:

margin-top: 50px;
margin-right: 10px;
margin-left: 15px;
margin-bottom: 20px;

But there is an easier way. You can combine all those styles together into one declaration:

margin: 50px 10px 20px 15px;

That will assign all your margins. The order is: margin: Top Right Bottom Left;

Incase you have trouble, coder Alex Perry came up with this handy way of remembering!
The
Rhino
Broke
Loose

Or you can assign just two values:

margin: 50px 20px;

This will asign the Top and Bottom margins 50px, and the Left and Right margins 20px. Another useful shorthand is the background declaration. Instead of this:

background-color: #0099CC;
background-image: url'(path/to/your/image.jpg');
background-position: top left;
background-repeat: none;

You can place it, like we did with the margins, into just one declaration:

background: #0099CC url('path/to/your/image.jpg') no-repeat top left;

This shorthand can be done with any style that has sub-values. Two of the best examples include fonts:

font: italic bold 12px Arial;

And borders:

border: 2px solid #0099CC;

Using shorthand can be very helpful to you. It means your CSS stylesheet is not as long, so less scrolling and searching for certain properties. It also can help to decrease the file size of the CSS sheet. This therefore means it takes less time to load, which can only be beneficial to your website.

• Capitalize The First Letter of a Paragraph with CSS
• How can I display the text 'Please turn your javascript on' if the user does not have javascript on, but not display the message to those who do?
• Organise your HTML with Comments
• Adding a StyleSheet to an RSS Feed
• Comment Your CSS