Folks, the following will help you not only shave off a few bytes in terms of bandwidth but will also help make your code cleaner (which translates to better maintenance) and easier to follow. At the end of the day, you will become a better developer:

1) Rather than do this:

margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;

Do this:

margin: 0 0 0 0;

Note 2 things:
1) if the number is zero, no need specifying units.
2) The order for the above is TRBL or as is called normally, "TRouBLe"

2) Rather than do this:

background-color: #cccccc;

Do this:

background-color: #ccc;

Note 2 things:
1) Use lowercase
2) this only works if the each pair in the sequence is equal. In other words, #ff0000 could be rewritten as #f00 but couldn't rewrite #f0ff00

3) Rather than do this:

border-top: 1px;
border-right: 1px;
border-bottom: 1px;
border-left: 1px;
border-color: #cccccc;
border-style: dotted;

Do this:

border: 1px dotted #ccc;

note:
1) this works only if all 4 sides are the same. If even one side is off, you will need to revert to the "rather than do this" section

4) Rather than do this:

background-image: url(/images/navi-bg.jpg);
background-repeat: no-repeat;
background-color: #fff;
background-position:center left;

Do this:

background: #fff url(/images/navi-bg.jpg) no-repeat center left;

Note:
Order is important

Hopefully some of us get to learn from this. If you have anything else to add, please do so. Let's LEARN something!

Aligning tables to "center" isn't something easily replicated in css, esp if you're beginner.

To do this to a div, use the following code:

#divcenter {
margin:0 auto;
width:902px;
}

This will give a div of 902px wide aligned to the center.

I go for this

margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;

this way

margin: 0;

And by the way, the margin shortcut as well applies to other css properties that have seperate values for their TRBLs e.g padding (padding-top, padding-right, padding-bottom, padding-left) and border-width (border-right-width, border-top-width, )
As uv learnt from the post, that such properties are in the order TBRL, they also go in the order T R/L B and T/B R/L and T/B/R/L. Here is wat Im trying to say:

margin:10px 5px 3px 1px /*10px top, 5px right, 3px bottom, 1px left: Bet already know this now*/
margin:10px 5px 1px /*10px top, 5px right and left, 1px bottom*/
margin:10px 5px /*10px top and bottom, 5px right and left*/
margin:10px; /*Set everything to 10px*/

kehers:

Thanks for the margin: 0 note. I should have used a better example in my case. Yes, when it is all zeroes, you just do margin: 0. Likewise, if all the values aer the same (like say a margin of 5), you just need to specify the value once (margin: 5px

Thanks for also specifying the order for when there are only 2 or 3 as well. I forgot about that.

I honestly thought I would be the only one posting to this. I am happy there are others. Please post more. Let us all LEARN something!

The background shortcut also applies to the list property.
Instead of this:

list-style-image: url(images/abc.gif);
list-style-position: inside;
list-style-type: square;

U can do this

list-style:square inside url(images/abc.gif);

For the (very) few that may not know, this

font-family: Tahoma, Verdana;
font-size: 12px;
font-variant: normal;

Can go this way:

font:normal 12px Tahoma, verdana /*font variant, (font weight if needed), size and family

he he

Kehers, I was actually purposely avoiding the font thingie because as much as I have tried to memorize it and find a pnemonic for it, my brain seems to be dying on this one

I use it all the time but for the life of me, I can never remember the order, he he.

<removed>

no retreat, no surrender

put it back

Dis works

background:#EEE

instead of this

background-color: #EEE

weeeell kehers,

the background-color option is preferred because it is more semantic.  Not only that, when trying to manipulate the DOM, you need to use style.backgroundColor.  By saying "background-color" in the CSS, it is easier to follow.  This also removes any doubt as to whether u r referring to background-image or background-color or just the whole background (with all its attributes)

Sure, a few extra typing but tis more semantic

p.s. It is sort of similar to using ticks when displaying background images in CSS (url (images/x.gif vs ('images/x.gif')). Both work but tis preferred to use the version with ticks.

This isn't a shortcut per se but a pretty nifty trick:

If you are concerned about how your pages are printing (like say you have a table that is printing on 2 pages because of the content above it on the page where it begins) pages, you can set hard breaks via CSS and the page-break-before or page-break-after properties. To avoid boring you with grammar, I will give you a link that explains it better than I probably can

Explanation:
http://www.javascriptkit.com/dhtmltutors/pagebreak.shtml

Demo:
http://www.javascriptkit.com/dhtmltutors/example.htm

Enjoy!

you can write your css code anyway you understand it, and use Free CSS Toolbox, http://www.blumentals.net/download/to compress your stylesheet

xclusiv,

Nice one but don't let that be an excuse to anyone for writing bloated code

I know a lot of you still LOOOOOOVE your <TABLEs> (as lazy as that might sound)
And would easily argue about its pros and advantages over using CSS. Good news:
YOU CAN EXTEND THE USE OF TABLES WITH CSS.

Sample CSS with TABLE code:

#main {
display: table;
border-collapse: collapse;
}

#nav {
display: table-cell;
width: 180px;
background-color: #e7dbcd;
}

#extras {
display: table-cell;
width: 180px;
padding-left: 10px;
border-right: 1px dotted #d7ad7b;
}

#content {
display: table-cell;
width: 380px;
padding-left: 10px;
}

Don't believe me?
See link for more:

http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/

@xlusiv
Just a note about CSS compressing - backup the original file as u will need it when u need to edit ur CSS. The same rule applies to JS.

@olush0la
And how do u express ur colspan and rowspan ? Really, I'd rather use a table that do that. Besides, IE lt 8 (IE before version 8*), which happens to be the most used browser out there (atleast at the moment)  doesnt support it.

Yes folks, let's remember that some CSS rules, though very powerful are not cross-browser. Even if they were, you always want to code for the lowest common denominator. Unless you are coding for an intranet where everyone is using the same software, in this case, you want to code for what ppl use the most currently, which is < IE8.

@kehers
Compressing Stylesheet does not change the code, it justs reduce the lines of code u have, and the CSS Software can be use to test your code and check for browsers compatibilty

I see, Was judging by the ones Iv come across - strips comments, removes all whitespaces and lines - and puts everything in a line.