what are some good css shorthands you can think of?

Question

some that i can think of are

font: bold 20px Verdana, sans-serif /* one line for variant, size, and family */

color: #336 /* short color code */

height: 0 /* no need to specify unit when 0 */

border: 0 /* same effect as border: none but shorter */

background: #ffc /* no need to use background-color if all is wanted is color */

padding: 0; border: 0; margin: 0 /* to show only content but nothing else */

border: 1px dashed #ff0 /* thickness, style, and color */

margin: 0 0.5em /* specify top, bottom, left, right margin */

Answer 1

 1. background: #fff url(image.png) no-repeat 20px 100px fixed;
 2. ul { list-style: decimal-leading-zero inside; }

Comma separated declarations

1. h1, h2, h3, h4, h5, h6 { font-family:Helvetica, Verdana, sans-serif; }

First-child selectors

 1. .footer em:first-child { color:#ccc; }

CSS3 features

Rounded box with a radius

1. .rounded_corner { -moz-border-radius:10px; -webkit-border-radius:10px; width:400px; height:100px; background-color:#000; }

Shadow effect

.shadow { width:400px; height:200px; background-color:#000; -webkit-box-shadow: 5px 5px 2px #ccc; }

Answer 2

Dustin Diaz has an excellent CSS shorthand guide.

Answer 3

You can also specify the line height with the font property

font: bold 20px/1em Verdana, sans-serif /* one line for variant, size, and family */

Where 1em is the line height

Answer 4

Outline's another one:

outline:3px dotted gray;

list-style supports images, too:

list-style:square inside url(image.gif);

Kinda redundant, but here's another article explaining them all:

http://www.456bereastreet.com/archive/200502/efficient_css_with_shorthand_properties/