Coming to you a day late because of the funtastic holiday we had here in BC yesterday it is your CSS tip of the Day! When you are handcoding sites it can be a real time saver to learn some CSS shorthand declarations. The most important thing to keep in mind when you use these declarations is that you must ALWAYS define all of the properties in the pre-determined manner. This ensures that your declaration is parsed as expected in a cross browser friendly manner.
Today I am going to outline the three short hand declarations I most commonly use.
Ready? Here we go.
Background CSS Shorthand
background: #fff url(/images/background.jpg) no-repeat top center;
The order here goes color, image, repeat, location on the y axis, location on the x axis and finally position.
Padding and Margin CSS Shorthand
padding: 3px 5px 6px 9px;
margin: 8px 0;
Early in my coding days I sat at a friends computer and saw a post-it note that read Top, Right, Bottom, Left. His post-it was his attempt at memorizing the direction in which the shorthand properties for margin and padding were defined. It's clockwise as stated on that post-it. If the top and bottom and right and left are the same you can omit the last two definitions and they will inherit from the top and right ones. Be sure to always include a value on your padding such as px, em, percentage or you will leave it up the browser.
One fun thing to note with this is if you are using Selectors in your style sheets and you need to redefine the padding for a specific element sometimes it is best to just reset padding-left: 5px; as opposed to redefining the whole thing again. You'll use less code and spend less time trying to figure out why you just lost the top and or bottom spacing! This is especially true for SiteCM navigation.
Font CSS Shorthand
font: normal normal 12px/14px Tahoma, Arial, sans-serif;
Ok so I don't use this one all that often largely because it just does too much! I do however use it at least once for every site I code for the main body and p declarations. Defined here are the font-style, font-weight, font-size, line-height, font-family. I don't typically set the line-height largely because it can wreak havoc on so many other things. This is a really handy one to remember because believe you me you will want to set the font-size and weight more often for a span or div than you might think!