![\"Jeri Rowe\" by spcoon.](https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2008\/04\/shorthand-400.jpg "\\"'Jeri")
<\/p>\n<\/p>\n
Writing Cascading Style Sheets saves you time and bandwidth in the long run by removing all of the presentational elements and attributes from your web pages and moving them into a separate document. But sometimes that CSS document itself can get pretty long as well. So what do you do then?<\/p>\n
There are lots of things you can do to help \u2013 embracing the cascading nature of CSS<\/a> helps a great deal, as does combining CSS declarations<\/a> using sequential selectors. But another trick that can really help cut down on the size of your CSS is to use CSS shorthand properties whenever possible. There are six shorthand properties for various areas of your CSS: margins, padding, borders, backgrounds, list-styles, and fonts. I\u2019ll go through each of them below.<\/p>\n The margin shorthand property<\/strong> combines the margin-top, margin-right, margin-bottom, and margin-left properties into one single property. So instead of writing this:<\/p>\n You could shorten it all down to this:<\/p>\n It\u2019s important to remember to always put your margins in the shorthand property in the following order: top, right, bottom, and left. Basically, just start at the top and work your way around the element clockwise. And if your top\/bottom and left\/right margins match, you can boil your shorthand down even further:<\/p>\n The rule above applies a 5 pixel margin to the top and bottom of your div, and an 8 pixel margin to the left and right sides. If all four of your margins match, you could even just write this:<\/p>\n The padding shorthand property <\/strong>works exactly the same way as the margin shorthand. The biggest thing to remember about both of these properties is to start at the top and work your way around clockwise. And if you\u2019re shortening it to two values, the top\/bottom value always goes first, followed by the left\/right value. Further, if you don\u2019t need to specify a value on any one of the sides, you can just specify a zero (0) size with no unit of measurement.<\/p>\n The border property<\/strong> allows you to combine the border-width, border-style, and border-color properties into one. The width comes first, followed by the style, and then the color. So instead of writing out all this:<\/p>\n You could boil it down to a single rule, like so: <\/p>\n The background property<\/strong> is fairly powerful, in that it combines five rules into one: background-color, background-image, background-repeat, background-attachment, and background-position (in that order). So instead of writing this verbose mess of code:<\/p>\n We could boil all of that down to this little snippet:<\/p>\n Also note that I skipped the \u201ccenter\u201d portion of my background-position property: if you specify one background position (i.e. \u201ctop\u201d) but neglect to specify a second position value, \u201ccenter\u201d is the assumed value.<\/p>\n The list-style shorthand property<\/strong> isn\u2019t used all that often, but it can save you a couple of lines of code. It combines the list-style-position property with either of the list-style-type or list-style-image properties \u2013 you could probably specify both, but list-style-image would overwrite the list-style-type property with whatever image you selected. So instead of writing this:<\/p>\n You could write this:<\/p>\n Generally speaking, however, I tend to only use this shorthand when I\u2019m looking to remove styling from the list (as when building a navigation bar):<\/p>\n The font shorthand property<\/strong> is probably the most powerful of all the shorthand properties. It combines a grand total of six properties into one: font-style, font-variant, font-weight, font-size, line-height (even though it\u2019s not technically a font property), and font-family. So instead of writing out all six of these rules:<\/p>\n I can get by with a single declaration: <\/p>\n Of course, most of the time you won\u2019t be specifying all six of those properties at once \u2013 I can\u2019t even imagine how difficult it would be to read italicized, bold-faced small caps! But it is very useful for specifying your font-size, line-height, and font-family all in one place. That way, all of your typeface information sits one convenient location.<\/p>\ndiv {\n\tmargin-top: 5px;\n\tmargin-right: 8px;\n\tmargin-bottom: 3px;\n\tmargin-left: 4px; }<\/pre>\ndiv { margin: 5px 8px 3px 4px; }<\/pre>\ndiv { margin: 5px 8px; }<\/pre>\ndiv { margin: 5px; }<\/pre>\ndiv { padding: 30px 0; }<\/pre>\ndiv {\n\tborder-width: 3px;\n\tborder-style: solid;\n\tborder-color: #c00; }<\/pre>\ndiv { border: 3px solid #c00; }<\/pre>\ndiv {\n\tbackground-color: #fff;\n\tbackground-image: url(..\/images\/bg.gif);\n\tbackground-repeat: repeat-y;\n\tbackground-attachment: fixed;\n\tbackground-position: top center; }<\/pre>\ndiv { background: #fff url(..\/img\/bg.gif) repeat-y fixed top; }<\/pre>\nul {\n\tlist-style-type: square;\n\tlist-style-position: inside; }<\/pre>\nul { list-style: square inside; }<\/pre>\nul { list-style: none; }<\/pre>\np {\n\tfont-style: italic;\n\tfont-variant: small-caps;\n\tfont-weight: bold;\n\tfont-size: small;\n\tline-height: 1.2em;\n\tfont-family: Helvetica, Arial, sans-serif; }<\/pre>\np { font: italic small-caps bold small\/1.2em Helvetica, Arial, sans-serif; }<\/pre>\n