Shorthand CSS - a few simple tips!
Saturday, June 7th, 2008Anyone who works with css knows the great potential and flexibility that it has given designers, enabling us to create beautifully designed and well coded websites. By taking advantage of simple css shortcuts (e.g a line of code relating to one property) you will be able to reap the benefits of time saving and effective code, not only helping you create, but also eliminate any issues that might arise and also make updating much faster.
A common assumption by newbie cssers is to specify each individual property line by line (this is by all means not wrong, but it is however a longwinded way of writing your css). Below in the next set of examples i will try to explain some of the basic methods for shortening your css.
Inefficient code
#selector {
margin-top:25px;
margin-right:0px;
margin-bottom:25px;
margin-left:0px;
}
Efficient code
#selector{
margin:25px 10px 25px 10px;
}
As you can see we have manage to shorten the css styling from 6 lines to only 3. The way this works is by setting the properties in order: Top, Right, Bottom and then Left.
Similarly to simplify your code further you could use the following for the padding attribute:
Even more eficient code
#selector{
margin:25px 10px;
}
This works by setting the top and bottom margin to 25px and the left and right margin to 10px;
If the all of the attributes are the same (e.g top, right, bottom and left) you can simplify your code once again:
#selector{
margin:40px;
}
The example above shows an example where a 40px margin is required on the top, right, bottom and left of your div.
This method isn’t just used for the margin attribute it can also be used for things such as padding and the same principle can be carried into things such as font, background, border etc. Below i will show some example of long winded css compared to shorthand css.
Fonts
Example 1
#selector {
font-weight: bold;
font-family: verdana;
font-size: 115%;
}
Example 1 in shorthand
#selector{
font: bold 115% verdana;
}
Background
Example 2
#selector {
background-color:#003366;
background-image:url(images/background.gif);
background-position:top;
background-repeat:no-repeat;
}
Example 2 in shorthand
#selector{
background:#003366 url(images/background.gif) top no-repeat;
}
Borders
Example 3
#selector {
border-weight:1px;
border-style:solid;
border-color:#ffcc00;
}
Example 3 in shorthand
#selector{
border:1px solid #ffcc00;
}
As you can see the above examples show a clear demonstration of how to code more efficiently.
Body is your friend
Another common mistake that i often see when editing other peoples work is the constant use of font this, font that, and its used on nearly every div, or element of the xhtml document.
For example
#mydiv{
font-family:Arial, Helvetica, sans-serif;
font-size:62.5%;
font-weight:bold;
}
.mytextarea{
font-family:Arial, Helvetica, sans-serif;
font-size:62.5%;
font-weight:bold;
}
By utilising the body tag correctly you can save your self a lot of hassle and extra code.
Simply start by setting everything in the body tag like below:
body{
font:bold 62.5% Arial, Helvetica, sans-serif;
colour:#000;
}
Additionally if you know that you want everything to have the same font, whether it be an input element or just a standard div, make use of the star hack:
*{font-family:Arial, Helvetica, sans-serif;}
To find out more regarding the star hack click here
