Using CSS Shorthand for Fast-loading Websites

Nothing is more certain to turn away visitors than a slow-loading website, so it’s worth doing everything you can to make your site load as quickly as possible. Common techniques include compressing images and removing unnecessary markup from your pages; however, one often-overlooked aspect is your site’s CSS. With a complex page layout, a CSS file can easily run into the tens of kilobytes, adding significantly to a website’s initial load time.

Fortunately there are a number of CSS shorthand tricks you can use to dramatically reduce the size of your CSS files, and save typing at the same time! Let’s explore them.

Background shorthand

Backgrounds are one area where you can save a lot of space. There are 5 properties related to an element’s background:

background-color: color | transparent | inherit
background-image: uri | none | inherit
background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit
background-attachment: scroll | fixed | inherit
background-position: [ percentage | length | left | center | right ] [ percentage | length | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit

(These are discussed in more detail in the Controlling background images and colours tutorial.)

However, you can declare all of the above properties in a single line by using the background property, as follows:

background: [ background-color || background-image || background-repeat || background-attachment || background-position ] | inherit

An example

Here’s a selector that:

• sets a blue background colour on an element
• adds a teddy bear image to the background
• makes the bear repeat vertically
• stops the bear scrolling with the element, and
• positions the bear at the top left of the element

.teddyBear
{
  background-color: blue;
  background-image: url("teddy.jpg");
  background-repeat: repeat-y;
  background-attachment: fixed;
  background-position: left top;
}

All of the above properties can be reduced to a single background property as follows:

.teddyBear
{
  background: blue url("teddy.jpg") repeat-y fixed left top;
}

Much neater!

Initial values for background properties

Whether you use the longhand or shorthand approach to define backgrounds, you can leave out one or more properties. Those properties then take on initial values instead, as follows:

background-color:

transparent

background-image:

none

background-repeat:

repeat

background-attachment:

scroll

background-position:

0% 0%

For example, these two lines of code both achieve the same effect:

background: url("teddy.jpg") fixed;
background: transparent url("teddy.jpg") repeat fixed 0% 0%;

Border shorthand

There are four ways you can write border properties as shorthand:

• You can set the width, style, or colour of all 4 borders at once
• You can set the width, style, or colour of individual borders in one go
• You can set the width, style, and colour of 1 border in one go
• You can set the width, style, and colour of all 4 borders at once

Let’s take a look at these techniques in detail.

Setting the width, style, or colour of all 4 borders

The longhand way to set border width, style, or colour is to set them on each of the 4 borders individually, using the following properties:

border-top-width: border-width | inherit
border-right-width: border-width | inherit
border-bottom-width: border-width | inherit
border-left-width: border-width | inherit

border-top-style: border-style | inherit
border-right-style: border-style | inherit
border-bottom-style: border-style | inherit
border-left-style: border-style | inherit

border-top-color: color | transparent | inherit
border-right-color: color | transparent | inherit
border-bottom-color: color | transparent | inherit
border-left-color: color | transparent | inherit

Using the border-width, border-color and border-style CSS shorthand properties, you can set any or all of these 3 properties on all 4 borders at once:

border-width: border-width | inherit
border-style: border-style | inherit
border-color: color | transparent | inherit

For example:

.thickDashedRedBorder
{
  border-width: 10px;
  border-style: dashed;
  border-color: red;
}

Setting the width, style, or colour of individual borders

You can also use border-width, border-style and border-color to set individual borders (or pairs of borders) in one go, using the same techniques as for margin and padding. For example:

// Top dotted, right dashed, bottom groove, left ridge:
border-style: dotted dashed groove ridge;

// Top & bottom dotted, left & right dashed
border-style: dotted dashed; 

See Margin and padding shorthand below for more info.

Setting the width, style, and colour of 1 border

If you just want to style a single border — either the top, right, bottom, or left — you can use shorthand for this too:

border-top: [ border-width || border-style || border-color ] | inherit
border-right: [ border-width || border-style || border-color ] | inherit
border-bottom: [ border-width || border-style || border-color ] | inherit
border-left: [ border-width || border-style || border-color ] | inherit

An example:

.thickDashedRedBottomBorder
{
  border-bottom: 10px dashed red;
}

As with the background shorthand property, you can leave out any of the three properties and they will take on their initial (default) values:

border-width:

medium

border-style:

none

border-color:

Browser-dependent, but often black

Setting the width, style, and colour of all 4 borders

You can also set the width, colour, and/or style of all 4 borders in a single line. The ultimate in border shorthand!

border: [ border-width || border-style || border-color ] | inherit

Example:

.thickDashedRedBorder
{
  border: 10px dashed red;
}

Again, if you miss out any of the three properties, they’ll take on their initial values.

Colour shorthand

The usual way to specify a colour in CSS is to use its 6-digit hex value, as follows:

color: #ff0000; // red
color: #000000; // black

If any of the 3 pairs of hex values contain repeating digits, you can omit the second digit, saving space:

color: #f00; // red
color: #000; // black

If you prefer to work with decimal numbers or percentages rather than hex, you can:

color: rgb(255,0,0); // red
color: rgb(0,0,0); // black
color: rgb(100%, 0%, 0%); // red
color: rgb(0%, 0%, 0%); // black

You can also use predefined English colour names, which are easier to remember:

color: red;
color: black;

Here’s a list of all the available colour names.

Font shorthand

There are 6 font-related properties in CSS:

font-style: normal | italic | oblique | inherit
font-variant: normal | small-caps | inherit
font-weight: normal | bold | bolder | lighter | 100, 200 ... 900 | inherit
font-size: absolute-size | relative-size | length | percentage | inherit
line-height: normal | number | length | percentage | inherit
font-family: [[ family-name | generic-family ] [, family-name | generic-family]* ] | inherit

For example, you might set the appearance of text paragraphs as follows:

p
{
  font-style: normal;
  font-variant: small-caps;
  font-weight: bold;
  font-size: 1.2em;
  line-height: 130%;
  font-family: "Times New Roman", serif;
}

CSS gives you the font shorthand property that lets you combine all of the above properties into a single line:

font: [ font-style || font-variant || font-weight ]? font-size [ / line-height ]? font-family> ]

So you can write the above properties as a single font property as follows:

p
{
  font: normal small-caps bold 1.2em/130% "Times New Roman", serif;
}

When using the font property, you have to specify at least font-size and font-family. All other values are optional, and default to the initial value of normal if omitted.

List shorthand

You can set 3 properties on list elements (ul, ol, and dl) in CSS:

list-style-type: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit
list-style-position: inside | outside | inherit
list-style-image: uri | none | inherit

For example, the following CSS sets the bullet used for unordered lists to an image called bullet.png, using a hollow circle if the image is unavailable, and positions the bullets inside the list elements’ content boxes:

list-style-type: circle;
list-style-position: inside;
list-style-image: url("bullet.png");

As you’ve probably guessed, you can specify all these properties at once using the list-style shorthand property, as follows:

list-style: [ list-style-type || list-style-position || list-style-image ] | inherit

So the above list style could be specified using:

list-style: circle inside url("bullet.png");

If you miss out any of the list-style properties, they take on the following initial values:

list-style-type:

disc

list-style-position:

outside

list-style-image:

none

Margin and padding shorthand

You probably know that you can set margin widths on each of the four sides of an element’s box using the following properties:

margin-top: margin-width | inherit
margin-right: margin-width | inherit
margin-bottom: margin-width | inherit
margin-left: margin-width | inherit

You can also use the margin shorthand property in various ways to shorten your margin declarations.

To set a 10-pixel margin width on all four sides at once, use:

margin: 10px;

To set a 10-pixel margin on the top and bottom and a 20-pixel margin on the left and right, use:

margin: 10px 20px;

To set a 10-pixel margin on the top, a 20-pixel margin on the left and right, and a 30-pixel margin on the bottom, use:

margin: 10px 20px 30px;

Finally, to set the margins to 10 pixels on the top, 20 pixels on the right, 30 pixels on the bottom, and 40 pixels on the left, use:

margin: 10px 20px 30px 40px;

Padding shorthand works in exactly the same way as margin shorthand. For example, you can write:

.myBox
{
  padding-top: 1em;
  padding-right: 2em;
  padding-bottom: 3em;
  padding-left: 4em;
}

as:

.myBox
{
  padding: 1em 2em 3em 4em;
}

Outline shorthand

CSS lets you set outlines on most page elements. Outlines are similar to borders in that they sit around the edges of the box. However, outlines differ from borders in the following way:

• They don’t take up space in the page
• They can be non-rectangular
• You can’t specify outlines on a per-edge basis as you can with borders

You specify individual outline properties in a similar way to borders:

outline-color: color | invert | inherit
outline-style: outline-style | inherit
outline-width: outline-width | inherit

Or you can use the outline shorthand property to specify all 3 properties at once:

outline: [ outline-color || outline-style || outline-width ] | inherit

For example, the following code sets a red dotted 5-pixel outline on all img elements:

img
{
  outline: red dotted 5px;
}

The special invert colour can be used in outlines; rather than using a specific colour, it inverts the pixels of the outline, ensuring that the outline is always visible.