Top 5 CSS Shorthand Properties

An excellent way to simplify and streamline your Cascading Style Sheets (CSS) is to take advantage of the many different shorthand properties available to you. Working with a lot of CSS, you eventually memorize these different shortcuts, but every now and then, I find myself needing a quick, straightforward reference for some of the more elaborate property combinations. In this post, I’ll show you the shorthand rules for the following properties:

1. Font Properties
2. List Properties
3. Background Properties
4. Border and Outline Properties
5. Transition Properties (CSS3)

These are the top 5 on my list of most complicated and frequently used shorthand properties. There are others as well, even in CSS3, but I’ll save those for another post. Alright enough of my narcissistic ramblings – let’s do this thing!

Font Properties ↩

Styling fonts involves a number of individual properties. You can save quite a bit of space using shorthand notation, but be careful to include at least font-size and font-family (in that order). Here are all 6 of the font properties along with their default values:

/* font properties with default values */
font-variant: normal
line-height: normal
font-family: varies
font-weight: normal
font-style: normal
font-size: medium

These 6 declaration blocks can be combined into a single shorthand rule, ordered according to W3C specifications:

/* shorthand notation for font properties */
font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];

/* EXAMPLES */
font: 14px Georgia, serif;
font: 14px/1.4 Georgia, serif;
font: italic lighter 14px/1.4 Georgia, serif;
font: italic small-caps lighter 14px/1.4 Georgia, serif;

As you can see, a single line of code is used to replace an entire block. Far more elegant, if not slightly awkward looking. The more I use this syntax, the more I like it.

List Properties ↩

There are 3 CSS list properties available to pimp out your lists. These properties address all of the essentials: type, image, and position. Here they are along with their default values:

/* list properties with default values */
list-style-position: outside;
list-style-image: none;
list-style-type: disc;

Not too crazy, but we can certainly simplify. These 3 declarations can be combined into a single shorthand rule, ordered according to W3C specs:

/* shorthand notation for list properties */
list-style: [list-style-type] [list-style-position] [list-style-image];

/* EXAMPLES */
list-style: none;
list-style: disc;
list-style: disc outside;
list-style: disc outside url(bg.png);

About as simple as it gets – basically just shortening the name of every list property across the board for any combination of values. Pretty slick.

Background Properties ↩

Many stylesheets include multiple selectors with background properties. Included individually, the 5 background properties require a considerable amount of code. Here they are in all their verbose glory, along with corresponding default values.

/* background properties with default values */
background-attachment: scroll;
background-color: transparent;
background-position: top left;
background-repeat: repeat;
background-image: none;

Fortunately, most designers are more familiar with the shorthand notation than the individual properties themselves. To clean things up, these 5 declarations can be combined into a single shorthand rule, here ordered according to W3C specifications:

/* shorthand notation for background properties */
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];

/* EXAMPLES */
background: #777;
background: url(http://domain.tld/images/bg.png) 0 0;
background: #777 url(http://domain.tld/images/bg.png) repeat-x 0 0;
background: #777 url(http://domain.tld/images/bg.png) repeat-x fixed 0 0;

There are many nuances regarding proper syntax and usage of the background shortcut, so see the official documentation for all the juicy details.

Border and Outline Properties ↩

Borders

Styling border and outline properties is much easier with a few well-written shorthand rules. Here are all 3 of the border properties along with their default values:

/* border properties with default values */
border-width: none;
border-style: none;
border-color: none;

These can be combined into a single shorthand property, ordered according to W3C specifications:

/* shorthand notation for border properties */
border: [border-width] [border-style] [border-color];

/* EXAMPLES */
border: 1px solid #111;
border: 2px dotted #222;
border: 3px dashed #333;

You can also specify border properties for different sides of the box:

border-bottom: 1px solid #777;
border-right:  2px solid #111;
border-left:   2px solid #111;
border-top:    1px solid #777;

There is a lot more that can be done with CSS border properties. For more information, check out this boring post – it’s bone dry, but very concise and informative. You can also learn how to create perfect, cross-browser rounded corners with CSS.

Outlines

Very similar to border is outline. Here are the 3 individual outline properties:

/* outline properties */
outline-width: thin;
outline-style: dotted;
outline-color: inherit;

And here is the shorthand notation according to W3C:

/* shorthand notation for outline properties */
outline: [outline-width] [outline-style] [outline-color];

/* EXAMPLES */
outline: 1px solid #111;
outline: 2px dotted #222;
outline: 3px dashed #333;

A few points about outline:

• Incomplete browser support for the outline property
• Outlines do not interfere with layout – they are rendered above the element
• Designers frequently remove unwanted border outlines on graphical links
• If you disable outline styles with a reset stylesheet, remember to enable an alternate style

Transition Properties (CSS3) ↩

Pure CSS transitions are the hottest things since pancakes, so even though only Webkit-based browsers such as Safari understand the transition property, it’s possible to get transitions working in Firefox, Chrome, and Opera with just a few additional lines of CSS. Here are all 4 of the transition properties along with their default values:

/* transition properties with default values */
transition-property: none;
transition-duration: none;
transition-delay: none;
transition-timing-function: none;

And here is the shorthand property, along with obligatory examples:

/* shorthand notation for transition properties */
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

/* EXAMPLES */
transition: opacity 3s ease 1s;
transition: opacity 3s ease-in 1s;
transition: opacity 3s ease-out 1s;
transition: opacity 3s ease-in-out 1s;

I like how it goes “word number word number” for the order of the property values. Having the numbers sort of broken up like that with a named value makes the order a little easier to remember. But as mentioned, we need a few additional rules to get transitions working in all non-IE browsers. It’s basically just a few lines replicating the rule with vendor-specific prefixes:

-webkit-transition: opacity 3s ease 1s;
-moz-transition: opacity 3s ease 1s;
-o-transition: opacity 3s ease 1s;
transition: opacity 3s ease 1s;

Yes, the additional declarations mute the elegance of the transition shorthand, but it works. I look at it as progressive enhancement. The browser-specific stuff enhances the experience for those particular browsers without effecting anything else.

“Clean up, go home..”

These CSS shortcuts will save you time and resources. You should already be using them. So if not, now is the time to begin. Clean up your stylesheets, save time, and go home early ;)

Other great resources for CSS shorthand

Here are the best of what I’ve seen on the topic:

• Efficient CSS with shorthand properties – Roger Johansson (2005)
• CSS Shorthand Guide – Dustin Diaz (2005)

If you know of others, let me know and I will add them to the list.

About the Author

Jeff Starr = Fullstack Developer. Book Author. Teacher. Human Being.