Using CSS shorthand properties you can reduce the size of your cascading style sheet (CSS) files, making them neater and easier to read and, in the process, help your site to load faster. File size is a key factor in reducing page loading times and giving your visitors an optimal experience on your web site.
CSS shorthand is a way to group similar properties together in one declaration. There are a number of shorthand properties available; the most frequently used are: background, font, list-style, border, margin, and padding,. Shorthand can also be used for abbreviating web-safe colours.
[TIP]: Always specify a unit of measurement, such as pixels (px), em, or percentage (%), unless the value is zero. 0 = 0 regardless of the measurement!
CSS shorthand is always written the same way, with the property followed by 1,2,3, or 4 values separated by a single spacing. To understand how this works we need to look at the Box Model.
The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model.
Each box has a content area (e.g. text, an image, etc.) and optional surrounding padding, border, and margin areas; the size of each area is specified by properties …
Example:
The size of each area is specified by properties that have values you assign to them. 4 values = 4 sides.
However, CSS shorthand properties allow us to combine these four values like this:
- One value: the value is applied to all sides;
- Two values: the values are applied to top and bottom and to right and left;
- Three values: the values are applied to top, right and left, bottom;
- Four values: the values are applied to top, right, bottom, left in that order.
The easiest way to remember the order in which values are applied is by thinking of a clock.
CSS Shorthand Memory Aid
The clock starts at 12 o'clock (top). If only one value is specified the hand sweeps right around, applying the value to top, right, bottom and left sides as it goes. eg. margin: 6px.
If two values are specified, eg. margin: 6px 3px, the clock applies the first value to the top, the second to the right, then repeats this again for the bottom and left sides.
Colour
While some colours in CSS are specified using keywords (eg. "white") or RGB, most designers use hexidecimal notation to specify colour to avoid User Agents (browsers) from interpreting the colours in a way the designer did not intend. Hexidecimal notation is written with an octothorpe (#) followed by six digits. eg. #000000 which produces the colour "black". Shorthand properties can be used to abbreviate hexidecimal colours, thereby saving space and reducing file size. This is only possible when the colour consists of three pairs of hexidecimal digits. To shorten them, just omit the second digit from each pair.
eg. #000000 becomes #000, #ffffff becomes #fff, #ff9900 becomes #f90, #336699 becomes #369.
Background
Background values are applied in this order: background-color, background-image, background-repeat, background-attachment, and background-position. The shorthand property is simply "background" (without the quotation marks). Let's look at an example:
body {
background-color:#ffffff;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:top left;
}
The background of the body element can be written like this:
body {
background:#fff url(background.gif) no-repeat fixed top left;
}
Background position follows the same rules as the box model (above). When specifying top, right, bottom, left values do not mix keywords with measurements. Background positions must specify the horizontal position (x) before the vertical position (y).
Background should always use color, but as with the font properties, you don’t have to specify all values. If a value is omitted, its initial value is used. The initial values for the individual background properties are as follows:
- color: transparent
- image: none
- repeat: repeat
- attachment: scroll
- position: 0% 0%
W3C’s CSS 2.1 specification on background properties.
Font
Font is the shorthand property for font-style, font-variant, font-weight, font-size, line-height, font-family. The values are applied in that order.
When using the font property you can chose to omit any values but must specify the font-size and font-family (in that order). Values that you omit will inherit the initial values that most browsers respect (for most, this value is simply, "normal").
Let's look at a real-life example:
div.componentheading {
font-family:Georgia, "Times New Roman", Times, serif;
font-variant:small-caps;
font-style:italic;
font-size: 20px;
line-height:25px;
font-weight:bold;
}
This example was taken from a free Mambo template. It ignores the correct order of properties and also takes up far more space in the CSS than it needs to. Here is how it could have been written:
div.componentheading {
font:italic small-caps bold 20px/25px Georgia,"Times New Roman",Times,serif;
}
W3C’s CSS 2.1 specification on the font shorthand property.
List-Style
List-style is the shorthand property for both ordered lists (ol) and unordered lists (ul). It is used for the following: list-style-type, list-style-position, list-style-image.
The most common use of list-style is list-style:none; which removes all bullet points and numbering from lists. Inheritance transfers the list-style from ol or ul to list items (li). Let's look at another example:
ul {
list-style-type:square;
list-style-position:inside;
list-style-image:url(bullet.gif);
}
CSS shorthand does the same thing with:
ul {list-style: square inside url(bullet.gif);}
W3C’s CSS 2.1 specification on the lists properties.
Border
The initial style of borders is "none", which means borders are not set unless you specify them. Borders are "drawn" on the background of the containing box (refer to the box diagram above). Border is the shorthand for border-width, border-style, border-color and these should be applied in that order.
Where borders can get confusing is that border-width, border-style, and border-color are themselves shorthand properties. Border-width, for example, could be written like this:
border-top-width:1px;
border-right-width:2px;
border-bottom-width:3px;
border-left-width:4px;
While this is the long form and is technically correct, the more usual way of writing border-width is like this:
border-width:1px 2px 3px 4px;
Let's look at an example:
#menu {
border-width:1px;
border-style:solid;
border-color:#000;
}
This example specifies a solid black border that is 1 pixel wide, which will go around all four sides of the box. Using CSS shorthand this becomes:
#menu {border: 1px solid #000;}
If we want to apply a border to only two sides of the box we could have the long version written like this:
#menu {
border-right:1px solid #000;
border-bottom:1px solid #000;
}
CSS shorthand can reduce this further, like so:
#menu {
border:1px solid #000;
border-width:0 1px 1px 0;
}
Shorthand properties for borders often do not lead to much reduction in the number of characters in your CSS, however using them makes your CSS easier to read and much easier to quickly indentify properties for editing later on.
W3C’s CSS 2.1 specification on the border shorthand properties.
Margin and Padding
Unlike borders, using shorthand for margins and padding can make a considerable difference to your file size. Both margins and padding follow the box model, so keep the top-right-bottom-left order of the box model in mind when you apply values to margins and padding.
Example:
#logo {
margin-top:10px;
margin-right:0;
margin-bottom:15px;
margin-left:5px;
padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:4px;
}
Can be shortened to:
#logo {margin: 10px 0 15px 5px; padding:1px 2px 3px 4px;}
Another example is seen quite often in free Mambo templates:
#logo {
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
padding-left:0px;
}
Not only is it unnecessary to add any measurement to 0 (zero) but this could be written like this:
#logo {margin: 0; padding:0;}
See how much space has been saved in the file?
W3C’s CSS 2.1 specification on margin properties and padding properties.
CSS shorthand is well worth learning. Not only will it reduce your file size (which can help to improve site loading performance) but it also helps to make the CSS more readable and easier to maintain. In this tutorial I only discussed some of the shorthand properties for CSS2.1. Some CSS3 is already supported by browsers and as this comes closer to adoption we will see more shorthand available.
Administrator Tips
Performance
Search Engine Optimisation
Security Tips
Talk Mambo
Templates
User Tutorials