Quick and Dirty: CSS Shorthand

I’ve decided to provide some quick and dirty tips and code snippets over the next few weeks that are useful for beginners and good reminders for us that have been building websites for a while.

This first set of quick and dirty tips involves 4 CSS shorthand tips for shortening the amount of code you have to use, thus reducing the file size of your stylesheets:

  1. CSS colors
  2. Remove units for zero values
  3. Background colors and properties
  4. Margins and padding

CSS Colors

The most accurate way to define colors in CSS is to use the hexadecimal values. For example:

  • #FFFFFF = white
  • #000000 = black
  • #CCFFFF = light blue

We could just leave it at that, but if you use these values over and over again, it gets monotonous and adds extra bloat to your code that you don’t need.

Instead of using the 6 characters that make up a color in hex, we can shorten it to only 3 characters like so:

  • #FFF = white
  • #000 = black
  • #CFF = light blue

As you see, the hex values change, but the colors stay the same. To shorten the hex values, think of the color values as 3 pairs of characters (which is what they really are).

CSS hex colors are divided into 3 pairs

If both letters/numbers in each pair are the same, you only need to use 1 of them. Do this for each pair and you will get a hex color that’s only 3 characters long (plus the #).

Note: This only works when both values in every hex pair are the same. The following examples can not be shortened:

  • #3C3C3C
  • #3F3A2C
  • #CCFFF1

Zero = Zero

This is one that’s overlooked by a lot of beginners. Zero is zero—no matter if you’re talking pixels, ems or percentages (0px, 0em, 0% = 0). There’s no need to include anything after a 0 (zero) value.

It’s all the same, so there’s no need to add the type of measure you’re using to zero values. This is a tiny thing maybe, but over a stylesheet, it can really reduce the file size.

Defining Background Colors and Properties

In CSS, you can define a rule for the background color of an element or class like this:

#some-element { background-color: #FFF; }

This works, but you can shorten this to simply:

#some-element { background: #FFF; }

You can also define other background properties such as a background image (and associated properties) all at once like so:

#some-element { background: #FFF url(../images/go.png) 100% 100% no-repeat; }

This sets the background color to white (#FFF), assigns a background image (go.png), anchors it to the bottom right of the element (100% and 100%) and makes sure the background image doesn’t repeat.

Margins and Padding

The code to set margins and padding can be shortened in CSS as well.

Imagine we have an element that needs a margin on the right and bottom of 10px, while the top and left sides have no margin applied to them. We could setup a rule like this:

#callout {
	margin-top: 0;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 0;

This gets the job done, but it’s terribly long-winded. We can shorten this dramatically by entering the values of each side as 1 set of 4 numbers:

#callout { margin: 0 10px 10px 0; }

Much shorter, eh? We removed all the separate definitions for each side and combined them into one string.

This works by thinking of each side like a clock. The order of numbers is clockwise: top, right, bottom, left. Each side’s value is separated by a space.
Clock photo by Ruud

We can also shorten margins and padding in other ways in some situations. If all the sides have the same amount of margin, you can use just one value:

#callout { margin: 10px; }

In this example, all sides will get a 10px margin applied.

If the top and bottom margins are the same and the right and left sides are the same, you only need 2 values:

#callout { margin: 10px 5px; }

Here, the top and bottom get 10px margins and the right and left sides get 5px.


#callout { margin: 10px 5px 20px; }

Here, the top gets 10px, the right and left get 5px and the bottom gets 20px. In this example, the final (4th) value doesn’t need to be defined as long as it’s the same as the right side – in this case 5px.

These shorthand tips apply to defining padding as well.

I hope you enjoyed these quick CSS shorthand tips. There are more ways to shorten your code, but this will get you started.

Look next week for more quick and dirty tips. Subscribe to our RSS feed to keep updated.

Other Quick and Dirty Tips

Similar Posts: