Spring Sale! Save 30% on all books w/ code: PLANET24
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. Book Author. Secretly Important.
Banhammer: Protect your WordPress site against threats.

15 responses to “Top 5 CSS Shorthand Properties”

  1. Hi Jeff,

    This is off topic but I’m pretty sure I read this particular css trick off your website about two years ago. I lost all my notes so please, I hope you don’t mind me asking.

    It’s in regards to style.css found in a website source code.. When user clicks on it, it opens a totally different stylesheet .

    Thanks

  2. Hey lan, that was most likely the dark/lite theme-switching I had set up. You can do it much easier by toggling an id to the body element and then styling from there.

  3. Andrew Gates 2012/03/09 9:10 pm

    Good call on the ‘progressive enhancement’. It sucks, I love using CSS3 techniques, but not so much when I have to include -webkit, -moz, -o, etc. It’s honestly ridiculous that the browsers will not recognize the code if they support the feature. I understand its considered ‘experimental’, but I also understand that the browsers are all using the same code at this point. I continue using JavaScript for things like this because it works across even old browsers and I don’t have to trash my CSS documents with conditional code. That, or in many cases where I generate the CSS with PHP, I’ll pass a variable to the generator indicating which browser prefix to put on the new properties, but that also requires some JavaScript.

    Honestly, I am disappointed in the way CSS is standardized (not disappointed by the technology, by any means.) But I think the process of standardization has been extremely slow, vague and misinformed ever since CSS2. I know there’s a lot to consider, but CSS pitfalls are not being addressed quick enough, or at all, and its causing novices to use JS for inappropriate things, and pushing developers like myself to trash CSS through PHP and things like the LESS framework.

    You’re definitely spot-on with ‘progressive enhancement’. My thoughts are that CSS should be universal, and while the old browsers may not be able to handle these techniques, I’m writing comment this two years after you authored the article, and things still haven’t moved much further ahead. They’ve made progress… but it’s been slow, confusing progress. The way I see it, browser transforms work, have worked for a while, all use the same code – standardize the declaration and move on! Hurry before Microsoft gets any new ideas!!!

    Oh the horror!

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 »
GA Pro: Add Google Analytics to WordPress like a pro.
Thoughts
I live right next door to the absolute loudest car in town. And the owner loves to drive it.
8G Firewall now out of beta testing, ready for use on production sites.
It's all about that ad revenue baby.
Note to self: encrypting 500 GB of data on my iMac takes around 8 hours.
Getting back into things after a bit of a break. Currently 7° F outside. Chillz.
2024 is going to make 2020 look like a vacation. Prepare accordingly.
First snow of the year :)
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.