CSS Shorthand

Learning to use CSS shorthand in your development has a very small learning curve, and brings with it great benefits. It will speed up your CSS development, decrease the size of your stylesheets – for better page loading times, and help keep your stylesheets tidy – making them easier to maintain.

As well as the traditional CSS shorthand properties, I will also cover some useful CSS3 shorthand properties. Lets go!

CSS2 Shorthand

Color

If your using hexadecimal values to declare colors, you might only need to declare one character per RGB pair, If they are the same.
For example #33AAFF can be written as #3AF. This only works if all the characters for the color value are rbg matching pairs. This would not work with #33AAFA for example.

Margin, Padding, & Border-width

Margin, padding and border-width can contain 4, 3, 2 or 1 value(s) to correspond with each side in a clockwise direction.

Syntax

{margin: top right bottom left;}

Example

Four values affect top, right, left, bottom

{margin:4px 3px 2px 1px;}
{padding:4px 3px 2px 1px;}
{border-width:4px 3px 2px 1px;}

Syntax

{margin: top right&left bottom;}

Example

Three values affect top, right and left, bottom

{margin:4px 3px 2px;}
{padding:4px 3px 2px;}
{border-width:4px 3px 2px;}

Syntax

{margin: top&bottom right&left;}

Example

Two values affect top and bottom, right and left

{margin:4px 3px;}
{padding:4px 3px;}
{border-width:4px 3px;}

Syntax

{margin: top&bottom&right&left;}

Example

One value affects all sides

{margin:4px;}
{padding:4px;}
{border-width:4px;}

Background

Syntax

{background: color image repeat position-X position-Y attachment;}

If properties are omitted they will default to the following.
{background: transparent none repeat 0 0 scroll;}

Example

CSS

{
background-color:#FFFF99;
background-image:url("image.png");
background-repeat:repeat;
background-position:200px 200px;
background-attachment:scroll;
}

Is the same as…

{background:#FF9 url("image.png") 200px 200px;}

We don’t need to mention the repeat and scroll values as these are the defaults anyway.

Border & Outline

Syntax

{border: width style color;}
{outline: width style color;}
This can also be used for individual sides
{border-left: width style color;}

Any border property can be omitted. The safest option would be to declare all values because the only sure default for border is for the color, black.

Example

CSS

{
border-width:9px;
border-style:dashed;
border-color:#333;
}

Is the same as…

{border:9px dashed #333;}

Font

Syntax

{font:style variant weight size/line-height family}

The font property requires font-size and font-family values to be declared, other wise the whole declaration will be ignored. All others Values can be omitted and will default to the following.
{font: normal normal normal / REQUIRED normal REQUIRED}

Example

CSS

{
font-style:normal;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:1.5em
font-family: verdana, arial, "sans serif";
}

Is the same as…

{font: small-caps bold 1em/1.5em verdana, arial, "sans serif";}

We don’t need to mention the font-style as it will default to normal anyway.

List-style

Syntax

{list-style:type position image}

Any value can be omitted and will default to the following.
{list-style: disc outside none;}

Example

CSS

{
list-style-type: square;
list-style-position: inside;
list-style-image: url(image.png);
}

Is the same as…

{list-style: square inside url(image.png);}

CSS3 Shorthand

At the time of writting this tutorial, If we want to use CSS3 properties for our web sites we sometimes need to use browser specific prefixes for most browsers. -o- for Opera, -moz- for mozilla based browsers, -webkit- for webkit based browsers, and others. Some CSS3 properties do not work on all browsers. This should not discorage us from using them as a form of progressive enhancement for those using compatible browsers. Although CSS3 is currently in working draft, there is a CSS3 validation service at W3C. Although browser specific properties will be displayed as errors.

Border-Radius

The border radius shorthand property can contain between one to eight values for radii.

Syntax

One value
{border-radius: all-corners;}
Two values
{border-radius: top-left&bottom-right top-right&bottom-left;}
Three values
{border-radius: top-left&bottom-right top-right bottom-left;}
4 values
{border-radius: top-left top-right bottom-right bottom-left;}
Or for more control
{border-radius: top-left-horizontal top-right-horizontal bottom-right-horizontal bottom-left-horizontal / top-left-vertical top-right-vertical bottom-right-vertical bottom-left-vertical;}

Example

{
border-top-left-radius: 5px;
border-top-right-radius: 15px;
border-bottom-right-radius: 5px;
border-bottom-left-radius:15px;
}

Is the same as

{
border-radius: 5px 15px;
}

Transitions

Syntax

{transition:property duration timing-function delay;}
Any value can be omitted and will default to the value “none”.

Example

CSS

{
transition-property:opacity;
transition-duration: 4s;
transition-timing-function: ease;
transition-delay:1s;
-webkit-transition-property:opacity;
-webkit-transition-duration: 4s;
-webkit-transition-timing-function: ease;
-webkit-transition-delay:1s;
-moz-transition-property:opacity;
-moz-transition-duration: 4s;
-moz-transition-timing-function: ease;
-moz-transition-delay:1s;
-o-transition-property:opacity;
-o-transition-duration: 4s;
-o-transition-timing-function: ease;
-o-transition-delay:1s;
}

Is the same as…

{
transition: opacity 4s ease 1s;
-webkit-transition: opacity 4s ease 1s;
-moz-transition: opacity 4s ease 1s;
-o-transition: opacity 4s ease 1s;
}