Topic: CSS Shorthand (Page 1 of 1)

Does anyone know of a good site to learn css shorthand?
Thanks in advance guys...

http://home.no.net/junjun/html/shorthand.html

Another one just for fonts specification. Has a good way to remember the proper order.
http://www.simiandesign.com/blog-fu/2004/07/more_css_shorth.php

Another CSS shorthand: When setting a property having a top, right, left, bottom versions( e.g. border-color, padding, border-width, margin, border-style ... ), the first one is the top and then the other goes clockwise. And if one is missing, its value is that of its opposite side.

margin: 10px 20px; /* see point 1 */

border-width:10px 20px 30px; /* see point 2 */

border-style:solid dashed double none; /* see point 3 */

1. sets the top and bottom margin to 10px and the right and left to 20px.
2. sets the top border-width to 10px, the bottom one to 30px and the right and left one to 20px.
3. sets the top border-style to solid, the right one to dashed, the bottom one to double and finally the left one to none.

All this is explained in CSS2 specifications: 8.5.1 Border width.

Hope that helps,

w3schools CSS is good as usual. You can choose an element from <that< page then pick the "On-line examples" link for that element and normall there's an example called "All the >element< properties in one declaration" where you can play around with an online editor.