CSS Shorthand is a very useful thing to know as it will keep your style sheets more organized and also keep the file sizes down.
October 13, 2006
Proper CSS Shorthand
One of the nicest features supported in CSS2 is the ability to use shorthand as well as longhand. While most people familiar with cascading style sheets use shorthand to some extent, there are several lesser used properties in which shorthand can be applied.
The main reason I use CSS shorthand is because it's easier to manage a style sheet when it's half the size of a similar one using longhand. While file size isn't the most important thing, mainly because style sheets are cached in the visitors browser, squeezing every last byte out of one can nonetheless save a lot of bandwidth on high traffic sites.
Margins & Padding
There are several ways to define margin and padding, but both use the same shorthand. Instead of using multiple properties, like margin-top or padding-right, you can combine them all using the CSS properties margin and padding. Look at the following examples:
- margin-top: 10px;
- margin-right: 15px;
- margin-bottom: 5px;
- margin-left: 0px;
- margin: 10px 15px 5px 0;
Both snippets of code do exactly the same thing.
But what happens when some or all of the sides have the same measurements? Let's take a look:
- margin: 10px;
This means that every side will have a margin of 10 pixels.
- padding-top: 10px
- padding-right: 5px;
- padding-bottom: 10px;
- padding-left: 5px;
can also be written as
- padding: 10px 5px;
So we've discussed one, two and four variables in the margin and padding properties, but not many know that you can also use three variables. The first stands for top, the second for right and left, and the third for bottom. The next two blocks of code will render an object's margin uniformly:
- margin: 0 10px 5px 10px;
- margin: 0 10px 5px;
The font property, unlike margin and padding, gives you the option of omitting most of the values. The only two requirements are the font size and the font family. All of the properties below are in the order in which they must appear in the font property.
- font-style: italic;
- font-variant: small-caps;
- font-weight: 500;
- font-size: 1em;
- line-height: 24px;
- font-family: arial,sans-serif;
Now let's take a look at the same instructions written in shorthand:
- font: italic small-caps 500 1em/24px arial,sans-serif;
This chunk of code will produce a font size of 1 em, a line height of 28 pixels, and a sans-serif typeface:
- font: 1em/24px sans-serif;
All of the other values that were omitted are inherited, so if you haven't set a property elsewhere in your CSS, they will be set to the default value.
This very useful property allows you to condense several values into one: the background property.
- background-color: #456;
- background-image: url(backdrop.gif);
- background-repeat: repeat-y;
- background-attachment: fixed;
- background-position: 50% 50%;
and in shorthand:
- background: #456 url(backdrop.gif) repeat-y fixed 50% 50%;
The background property, like font, uses the default values when they aren't present in the statement. Either the background color or the background image must be defined. The default values are listed below:
- color: transparent
- image: none
- repeat: repeat
- attachment: scroll
- position: left top (0 0)
Perhaps the most common mistakes people make when using the background property is switching the position values.
- background-position: top left;
it should be
- background-position: left top;
This mistake becomes apparent when you substitute the layman's terms for other values like pixels or percentages. In the spirit of shorthand, however, left top is more easily written as 0 0 whereas right bottom can be written as 100% 100%.
Another shorthand technique too insignificant to merit its own section is used here for the color. If you'll notice, I set the background color to #456. Expanded, this hex value is #445566. It's nothing life-changing, but every byte counts!
Two very useful properties are border and border-width. Using longhand, borders can easily become 10 or more statements. Let's take a look at how borders can work:
- border-left-color: #000;
- border-left-style: solid;
- border-left-width: 2px;
- border-right-color: #000;
- border-right-style: solid;
- border-right-width: 2px;
- border-top-color: #000;
- border-top-style: solid;
- border-top-width: 3px;
My favorite way of using border and border-width in lieu of the previous code is as follows:
- border: solid #000;
- border-width: 3px 2px 0;
If all of the border widths are the same, you can simply write this:
- border: 3px solid #000;
With the many border properties, there is a myriad of ways to achieve the same effect, but border and border-width will help a smaller chunk of code go a long way.
While this property is rarely used fully in the mainstream, it's still a good thing to be familiar with. Generally, list-style is simply set to none to remove any bullets or numbers.
- list-style-type: circle;
- list-style-position: inside;
- list-style-image: url(bullet.gif);
can be condensed to:
- list-style: inside circle url(bullet.gif);
Also rarely used, the outline property can be slightly abbreviated. Be careful using this property, though, as it's not supported in all browsers.
- outline-color: #fff;
- outline-style: dotted;
- outline-width: 1px;
is longhand for
- outline: #fff dotted 1px;