10 CSS shorthand techniques you’ll use everyday

CSS shortland is a technique of writing mulitple declarations and values in a single line of CSS code. The advantages of using shorthand is to primarily reduce the CSS file size, but there are other benefits. A bloated and disorganised stylesheet can be hard to debug if you encounter problems, especially if you wrote it and another unfortunate colleage has to fix it while your away sunning it in some hot climate.

To make it easy we’ll look at the most commonly used CSS declarations, write them in longhand, then sprinkle our magic, resulting in a neat, short line of code.

There are many permutations you can use with each declaration and using them all in an example would be a headache, so we’ll pick one, then simplify that, hopefully giving you a flavor of CSS shorthand.

0 values

The golden rule is if the value is 0 you don’t have to specify the unit (px/em/%). You may write:

01|  padding: 10px 5px 0px 0px;

try

01|  padding: 10px 5px 0 0;

Remove Selectors

A selector is basically the element you’re applying the styling to, for instance h1, h2, h2, div, strong, pre, ul, ol etc.. If your using a class (.classname) or an ID (#idname) you don’t need to include the selector within your declaration.

01|  div#logowrap

let’s lose the selector from within this CSS declaration

01|  #logowrap

So the selector in this case was div

* is the joker in the pack

Use * wisely in CSS as it’s a firey little monkey. * is a wildcard declaration, you can use it to set a group of declarations to all or parts of your design, for example:

01|  * {
02|  margin: 0;
03|  }

This declaration would set the margin to zero on every element on your page. Alternatively, set this wildcard with an element, such as:

01|  #menu * {
02|  margin: 0;
03|  }

This declaration would set the margin to zero on every element within #menu.

Backgrounds

Background properties include the ability to set a colour, an image, image position and image repetition. You could write:

01|  background-image: url("logo.png");
02|  background-position: top center;
03|  background-repeat: no-repeat;

Becomes

01|  background: url(logo.png) no-repeat top center;

Colours

The most common way of specifying a colour in CSS is to use hexadecimal notation: a (#) followed by six digits. One great shortcut that many don’t know about is that when a colour consists of three pairs of hexadecimal digits, you can omit one digit from each pair:

#000000 becomes #000, #336699 becomes #369

This technique only works if you have three pairs, here are some examples where you can’t omit any values:

#010101, #223345, #FFF000

Margin

Apply margin to all four sides of an element like this:

01|  margin-top:0px;
02|  margin-right:10px;
03|  margin-bottom:0px;
04|  margin-left:10px;

Let’s simplify this even more by removing zero value prefixes and merging it into one declaration:

01|  margin:0 10px 0 10px;

When applying padding, margin and border (and possibly a few others) you set these four values in a clockwise direction. Compare this to the hours on a clock, start with 12, 3, 6, 9, all in a clockwise direction. With this in mind there is another trick to slim this declaration down. Look out for two pairs, if the top and bottom match, and the left and right match then your a winner! Omit the 3rd and 4th values. The first value represents the top and bottom value, the second represents the left and right.

So let’s simplify this declaration down again with the pairing technique that’s just been explained:

01|  margin:0 10px;

The result is the element would attain margin of 10px to the left and right sides, and zero to the top and bottom. Here are a few declarations where the pairing technique can’t be applied:

Padding

Same principles in padding as explained in margin above.

01|  padding-top:0px;
02|  padding-right:10px;
03|  padding-bottom:0px;
04|  padding-left:10px;

Becomes

01|  padding: 0 10px;

Borders

Borders are a bit more complicated since they can also have a style and a colour. To give an element a one pixel solid black border on all sides, you could write:

01| border-width:1px;
02| border-style:solid;
03| border-color:#000;

Becomes

01| border:1px solid #000;

I typically write in order of width style color.

We can also set different widths on all four sides of the box element by writing:

01| border-top-width:1px;
02| border-right-width:2px;
03| border-bottom-width:3px;
04| border-left-width:4px;

The CSS shorthand for this would be:

01| border-width:1px 2px 3px 4px;

Finally we could style just the left and right like this

01| border-right:1px solid #000;
02| border-bottom:1px solid #000;

This would be

01| border:1px solid #000;
02| border-width:0 1px 1px 0;

Set a default style for all four sides then overwrite the widths below.

Fonts

There are many properties for font, just like the background properties. In a complex string you may write:

01| font-style:italic;
02| font-variant:small-caps;
03| font-weight:bold;
04| font-size:1em;
05| line-height:150%;
06| font-family:Verdana, Arial, sans-serif;

You could write

01| font:italic small-caps bold 1em/150% Verdana, Arial, sans-serif;

Lists

01| list-style-type:square;
02| list-style-position:inside;
03| list-style-image:url(filename.gif);

And finally

01| list-style:square inside url(filename.gif);

Credit to 456bereastreet for the inspiration to write this useful 10 shorthand CSS tips.

If you want to download a quick reference guide in PDF you can by clicking this link.