There are many ways to write short handed CSS. Below are some of the best ways I have found to reduce the size of my Cascading Style Sheets. These tricks let you specify several properties by using one line instead of endless line after line.
Fonts can he made a lot shorter than you might think. When I work with CSS I find myself doing a lot of this:
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: verdana,serif;
This works fine, however there is actually a much quicker way:
font: 1em/1.5em bold italic small-caps verdana,serif
Backgrounds can also be condensed into one line commands vs. writing out each line. As an example, here is the long way:
background-color:#f00;background-image:url(background.gif);background-repeat:no-repeat;background-attachment:fixed;background-position:0 0;
and here is the short way:
background:#f00 url(background.gif) no-repeat fixed 0 0;
Colors can also be short handed. This is a little known trick that works really well. Here is what most people would write for code using color:
#000000
#FFFFFF
#445566
However, as long as you have three pairs, you can easily shorthand your annotation to only 3 characters following the pound symbol. Take a look:
#000
Margins and padding code can be much simplified from:
#FFF
#456
margin-top:1em;margin-right:0;margin-bottom:2em;margin-left:0.5em;
by doing this:
margin:1em 0 2em 0.5em;
Lists can be shortened as well by using the shorthand properties for ordered and unordered lists. Typical CSS list code might look like:
list-style-type:square; list-style-position:inside; list-style-image:url(image.gif);
but would be much simpler expressed as:
CSS shorthand is quicker and more efficient to use in many situations. Support for this can vary among certain browsers, and it can also make it slightly more complex to read your CSS file. This brings me back to the Computer Science days where we would try and write the shortest lines of code to perform a task. In the end you could do so much in one line, however the readability of the line really suffered. The choice is up to you!list-style:square inside url(image.gif);