Fall Sale! Code FALL2024 takes 25% OFF our Pro Plugins & Books »
Web Dev + WordPress + Security

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:

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

About the Author
Jeff Starr = Web Developer. Security Specialist. WordPress Buff.
The Tao of WordPress: Master the art of WordPress.

15 responses to “Top 5 CSS Shorthand Properties”

  1. Deluxe Blog Tips 2010/05/04 11:30 am

    Nice roundup. I’m often confused when using font shorthand. So I always keep a cheatsheet about font shorthand by my side :)

  2. All excellent shorthand properties for cleaning up css. Messy CSS is a big pet peeve of mine, and I use all of those shorthands exclusively. Keeps it clean, easy to find what you need, and best of all it’s really quick to implement. Good stuff.

  3. Niki Brown 2010/05/04 11:12 am

    I’m horrible at remembering CSS shorthand. This post is a great reminder! You should make all the CSS as a downloadable file. (i just copied and pasted)

    Thanks!

  4. Jessi Hance 2010/05/04 12:42 pm

    Very useful! One suggestion: whether you choose to use shorthand or not, it’s probably a good idea to be consistent about it, one way or the other.

    Otherwise (and I speak from experience) you may be surprised by some specificity issues.

  5. I just wrote about this a month or so ago.

    Yours is a little more concise, and a much better quick-go-to sheet on it. Also a nice addition of the transition shorthand.

  6. Abdullah Al Mamun 2010/05/06 5:53 pm

    Thanks for this nice tut. It’ll definitely save my time.

  7. CSS Factory 2010/05/07 3:49 am

    It’s kinda funny that I am using CSS for 2 years now, and i was using the shorthand code for backgorunds, but never knew about what shorthand is meaning.
    Thanks for sharing Jeff! You really helped a half blind web designer :D

  8. Intim Creme 2010/05/09 12:02 pm

    Have another question: How do you get your boxes working like this ? They get bigger when the mouse is over them…
    Really nice!!

  9. @Intim: Thanks! Here is a tutorial for it: Making an Expanding Code Box, by Chris Coyier.

  10. Adrian D. Alvarez 2010/06/14 6:31 am

    One thing about writing font shorthand, I remember collaborating with a designer and the designer pointed out that it seems Safari has an issue with the line-height.

    Not sure if they fixed it in Safari 5.

  11. It looks like line-height in font shorthand is working as per spec since Safari 2.0.4:

    http://bit.ly/9AnfU7
    http://bit.ly/9bPq1X

  12. Web Designe in Bangladesh 2010/10/08 9:46 pm

    [R] .This the best way to excellent shorthand properties for cleaning up css. Messy CSS is a big pet peeve of mine, and I use all of those shorthands exclusively. Keeps it clean, easy to find what you need, and best of all it’s really quick to implement. Good stuff

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
WP Themes In Depth: Build and sell awesome WordPress themes.
Thoughts
I disabled AI in Google search results. It was making me lazy.
Went out walking today and soaked up some sunshine. It felt good.
I have an original box/packaging for 2010 iMac if anyone wants it free let me know.
Always ask AI to cite its sources. Also: “The Web” is not a valid answer.
All free plugins updated and ready for WP 6.6 dropping next week. Pro plugin updates in the works also complete :)
99% of video thumbnail/previews are pure cringe. Goofy faces = Clickbait.
RIP ICQ
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.