Shorthand for colors
#000 is the same as #000000
#369 is the same as #336699
Margin and Padding properties
margin: 1 ; all 4 margins are the same
margin: 1 2 ; top and bottom margin both equal to 1, left and right margins are 2
margin: 1 2 3 ; top margin is 1, right and left margins are 2, bottom margin is 3
margin: 1 2 3 4 ; top margin is 1, right margin is 2, bottom margin is 3, left margin is 4
The same TRouBLe rule applies to padding.
Border properties (border-top, border-right, border-bottom, border-left, border-width, border-style, border-color)
Borders are slightly more complicated since they can also have style and color. To give an element a one pixel solid black border on all sides:
border:1px solid #000;
Should always specify borders values in that order:
border:width style color;
The same syntax can be used with border-top, border-right, border-bottom, and border-left. You don't have to specify all three values. Any omitted values are set to initial values. The initial values are medium for width, none for style, and the value of the element's color for color. Note that the initial value for style is none, you do need to specify a style if you want the border to be visible.
The border-width, border-style, border-color properties use the TRouBLe rule mentioned above.
Background properties (background-color, background-image, background-repeat, background-attachment, background-position)
Instead of using background-color, background-image, background-repeat, background-attachment, and background-position to specify an element's background, you can use just background:
background:#f00 url(background.gif) no-repeat fixed 0 0
background: color imageURL repeat attachment position
As with the border and border sides properties, you don't have to specify all values. If a value is omitted, its initial value is used. The initial values for individual background properties:
color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%
Fonts properties (font-style, font-variant, font-weight, font-size, line-height, font-family)
font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif
When using font shorthand you can omit any values except font-size and font-family. You always need to give values for those, and in that order.
Lists (list-style-type, list-style-position, list-style-image)
list-style:square inside url(image.gif);
Outlines (outline-color, outline-style, outline-width)
The outline property is rarely used due to lack of support by browsers. The shorthand:
outline:#f00 solid 2px;
Outlines have some interesting characteristics that make them useful. Unlike borders, outlines do not take up any space, and are always drawn on top of a box. This means that hiding or showing outlines doesn't cause reflow, and they don't influence the position or size of the element they are applied to or that of any other boxes. Outlines may also be non-rectangular.
Tips:
For font size, IE5 handle ems better than pixel. IE7 now has better support for pixel. Need to verify.
CSS declarations on one line if they all fit on one line, depending on the width of your screen (to avoid having to scroll). If they don't all fit on one line, break them up into multiple lines, and indent. Use TextMate or other tools to remove spaces at publishing time.
Break your stylesheet into separate blocks. The first block is declaration for elements.
Do use universal selector to remove margins and paddings. I usually remove top margins on most elements, and some other things to make my life easier.
Allow Block Elements to Fill Their Space Naturally.
The problem with px font sizes is that they don't scale in IE (7 may be different), whereas ems do. Non-px based declarations are not size-consistent across browsers, nor platforms.
What is the fuss about resizable/scalable font sizes?
Use x-small, small, medium, etc.. Only if one of these doesn't suite, then use percentages, ems, or pixel. This tip come from a programmer, not a designer.
px and pt based sizes come from print-based media. The web is not print-based media. I would recommend using px and pt sizes for media="print" stylesheets, but not for screen media, where there are too many variables. The end user could be viewing your site through anything from a cellphone, a PDA, or a 30" PC screen at 2560x1600 px resolution.
Tools:
TextMate
To be researched:
Microformat
TextMate
Efficient CSS with shorthand properties
Useful tips for writing efficient CSS
