Webmaster Tips and Tricks

CSS Short-Hand Properties

Often your CSS may include many properties that can be combined making your CSS much shorter and neater. The most common CSS properties that can be combined are Font, Margin/Padding, Background and Border.
When using short-hand CSS, the properties must be put into a specific order for your web browser to read them. See examples below.

Font Property

{font-style: oblique; font-weight: bold; font-size: 16px; font-family: Helvetica, Arial, Sans-Serif;}
{font: oblique bold 16px Helvetica, Arial, Sans-Serif;}

Margin/Padding Properties

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

Note: the short-hand CSS for padding works the same as margin, just replace margin with padding.You can take this short-hand CSS one step further, if your top and bottom have the same margin and the left and right have the same margin you can code it like this:

{margin-top: 10px; margin-right: 30px; margin-bottom: 10px; margin-left: 30px;}
{margin: 10px 30px;}

Note: again this works the same for padding.

Background Property

{background-color: #000; background-image: url(image.jpg); background-position: left top; background-repeat: no-repeat;}
{background: #000 url(image.jpg) top left no-repeat;}

Border Property

{border-width: 2px; border-style: solid; border-color: #000;}
{border: 2px solid #000;}

Note: you can also use this short-hand CSS with border-top, border-right, border-left, and border-bottom.

{border-top: 2px; border-right: 5px; border-left: 10px; border-bottom: 3px;}
{border: 2px 5px 10px 3px;}

Note: You can also shorten this further like we did with the two value margin short-hand CSS. You can not combine the two border short-hands, if you wish for your border-left to have a different color/style than your border-right you must code separately.

{border-right: 2px solid #000;}
{border-bottom: 5px dashed #fff;}