Introduction to CSS Shorthand
One of the many great possibilities in CSS is the use of shorthand properties, which let you specify several properties by using only one. If you have started to learn about CSS and implement it on your Web pages, you’ll immediately see the benefit of using these shorthand properties. CSS shorthand makes it even easier for you to apply style to your markup, and makes your CSS code more concise.
In order for you to gain any value from this article you’ll need to know the common CSS properties and their values (see Kevin Yank’s "CSS Is Easy!"). They will be used here, but not extensively explained.
Browser support as indicated here for each shorthand property often only gives a general idea of actual compatibility. For more detailed information about the nature in which a particular property is buggy or partially supported under certain browsers, check the links at the end of this article.
Back To Basics
Let’s have a quick look at a sample CSS rule to refresh our memories on the different parts of CSS, and what they’re called:
A CSS rule will often contain many property declarations. CSS shorthand lets us declare several properties using a single shorthand property. Let’s look at an example to get a better idea.
To add CSS style to the body tag in HTML, you can write this:
The above code is a common way to apply CSS, used by happy coders all over the world. Now let’s see what happens if we try to define the same style, this time using a shortcut.
We’ll use the
background property, which allows us to set values for all the above properties more efficiently. In fact, we’re close to cutting the amount of code in half:
background: url("bg.gif") #fff repeat-x;
As you can see, there’s plenty of room to make your CSS more efficient if you know how to put the shorthand properties to work.
Let’s take a look now at some of the more frequently-used shorthand properties that you can implement easily on your own site. First, I’ll indicate the browser support available for the shorthand, then the syntax in which the shorthand is used, and then an example with a quick explanation.
font shorthand property
font: font-style | font-variant | font-weight |
font-size | line-height | font-family
font: x-large/110% "new century schoolbook", serif;
In this example, you’ll notice that we haven’t defined
font-weight; they’ll therefore use their existing values. The value
x-large/110% refers to
line-height. As both use size as value, they can be bundled together like this, with a slash,
font-size always being the first value defined. Quotes are used around the
font-family value because of the spaces included in the name of that value.
Eric Meyer suggests keeping the order of which the different font properties are defined strict. However, O’Reilly’s CSS Reference suggests that you can set these in any sequence.
padding shorthand properties
margin: margin-top | margin-right | margin-bottom | margin-left
padding: padding-top | padding-right | padding-bottom | padding-left
In this first example, all margins are set to 2em. When only one value is defined, it applies to all sides of the page (horizontal and vertical margins).
margin: 1em 2em;
In this example there are 2 values defined. CSS interprets the first as being the value for the horizontal margins, those at the top and bottom of the page, while the second value defines the right and left margins’ sizes.
margin: 1em 2em 3em;
In this last example, 3 values are defined.
Margin-top is set by the first value,
margin-right are set by the second, and
margin-bottom is set by the third.
When 4 values are defined, the top is defined first, and then the other values are automatically applied to the borders moving around the page in a clockwise direction (ie. top, right, bottom, left).
The rules for shorthand padding are the same as those provided here for margins.
border shorthand property
border: border-width | border-style | color
border: solid red;
This will set the borders for
p to a solid red line.
border: 1px dotted #369;
This will display a tiny blue dotted line around the paragraph.
border-left shorthand properties
border-top: border-width | border-style | color
These properties work the same as those described above for
border. But as
border does not distinguish between the four sides, these properties will let you set a style to a specific border.
border-right: 4px groove blue;
list-style shorthand property
list-style: list-style-type | list-style-position | list-style-image
list-style: url("dot.gif") disc inside;
In this example, lists will use the graphic file called
dot.gif. If it’s unavailable, lists will use ‘disc’.
background shorthand property
background: background-color | background-image |
background-repeat | background-attachment | background-position
background as the example in the introduction to this article.
background: url("bg.gif") gray 50% repeat fixed;
As you can see, the
background-image is set to
bg.gif, and the
repeat, but stays
fixed. Only one position is given, so the value
50% will apply horizontally.
Applying CSS Shorthand
We’ve learned that the CSS shorthand properties are quicker and more efficient to use than standard CSS in many situations. But we’ve also seen that support for these CSS properties can vary across browsers, so be sure to check what technology your target audience uses before implementing CSS shorthand on your site. Be careful with shorthand, and of course, make sure your styles degrade gracefully for older and non-compliant browsers.
The SitePoint CSS Reference
The W3C’s specs on CSS2
Webreview’s Style Sheet Section
Stylemaster – CSS compatibility Chart