Comments on: CSS shorthand tips

By: 25 extremely useful CSS Shorthand Tutorials : Online Marketing Blog - Website Development & Website Marketing tips and Strategies

Wed, 10 Sep 2008 05:57:57 +0000

[...] 22. CSS shorthand tips [...]

By: All About Yesterday » Blog Archive » CSS Shorthand Properties

All About Yesterday » Blog Archive » CSS Shorthand Properties — Sat, 13 Jan 2007 06:08:26 +0000

[...] WordPress Codex: CSS Shorthand Efficient CSS with shorthand properties by Roger Johansson CSS shorthand tips by Robert Nyman Webcredible - CSS shorthand properties by Trenton Mo [...]

By: Robert Nyman

Robert Nyman — Thu, 12 May 2005 11:24:30 +0000

But, and as Tommy wrote, if you use positioning in (for instance) pixels for the background image, they have to be in the horizontal/vertical order, like this:

background:#FFF URL(images/funky-pic.png) no-repeat 14px 20px;

where 14px will be the position from the left and 20 px the position from the top.

By: Faruk Ates

Faruk Ates — Thu, 12 May 2005 10:20:34 +0000

In my experience and given the W3C’s own example, the order of background: values is unimportant. Any order is allowed, given at least that each value is treated as one, even when values consist of multiple words (such as “top left”, i.e. you can’t do this: background: top URL(image.jpg) left;).

By: Robert Nyman

Robert Nyman — Thu, 12 May 2005 07:05:38 +0000

Tommy,

Thanks for the input.

I mentioned the border properties above, although I didn’t give an example of them.
For those who want to see examples of border and list style properties, please go to Roger’s article.

It’s basically the same principle as shown in the examples in this post.

By: Tommy Olsson

Tommy Olsson — Thu, 12 May 2005 06:58:10 +0000

Some mnemonic tips that I personally (brain like a sieve) find useful: Margins, padding, borders etc. are specified clock-wise starting at the top. Remembering top-right-bottom-left will keep you out of TRouBLe. An omitted value is taken from the opposite side, so margin:2px 4px means that the omitted bottom is equal to top (2px) and the omitted left is equal to right (4px). For font shorthand, the font-size and font-family are required, while the rest are optional. And as you noted, background positions are specified with the horizontal position before the vertical position. When using keywords it doesn't matter, but if you're using percentages or lengths, it's vital. Also, you should not mix keywords and numeric values. There are also shorthand properties for borders and list-style.