A small guide to help keep your CSS code more efficient and your Stylesheet to a minimum. This article will give an outline of all the CSS shorthand techniques that are available, or that I’m aware of anyway and help increase your productivity when producing your Stylesheets.
Okay, we all know some small shortcuts to help keep our code to a minimum but how many of us actually use all of the shorthand code that is available to us. To be honest this guide if not anything is a guide for myself as well as you. The main property of CSS is to help provide styling on elements within the HTML or XHTML so that we can keep our code down to a minimum and let the search engines get to the good stuff ( content ) more easily.
Below is a list of all the CSS Shorthand techniques that I’m aware of, hopefully you will be able to put these to good use. If I have missed any out please feel free to leave me a comment.
Box elements
These are probably the easiest of all the shorthand techniques and really make a difference to the code so take a look below.
Longhand
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
Shorthand
margin: top right bottom left;
margin: 0px 0px 0px 0px;
The above is perfect if all four properties of the box element are different but if you require an equal property on the top and bottom and then a different equal property on the left and right the solution below cuts the code down further, for example -
Longhand
margin: 20px 10px 20px 10px;
Shorthand
margin: top-bottom left-right;
margin: 20px 10px;
And then of course if you require equal properties to all side of the element then this is the shorthand below -
margin: 10px;
Making Colour
Colour is another one of the shorthand techniques which is as equally easy, however it is only relatively small and only cuts down on three digits but still worth doing as its that simple.
Longhand
color: #FFFFFF;
Shorthand
color: #FFF;
Okay, fairly painless! This is the easiest of the three I’m going to show you. If you have a property of white or another color of six equal digits then they can cut down to three but what if you have a color that doesn’t have the same digits throughout? See Below
Longhand
color: #99CC00
Shorthand
color: #9C0
By removing three of the same properties this will still achieve the same result. Now what about if you have a property of the below value?
color: #22b7d7;
Well, to be honest its not a web safe and the best solution to this is to find a similar colour for example:
color: #33CCFF;
then it can be cut down to the following
color: #3CF;
Background CSS Shorthand
Background CSS shorthand is another property that can be severely cut down and will really help keep your code a lot neater.
Longhand
background-color: #000;
background-image: url (bg.jpg);
background-repeat: no-repeat;
background-position:top left;
background-attachment: scroll;
Shorthand
background: #000 url(bg.jpg) no-repeat top left scroll;
This is probably one of my favorite rules to use as it just makes everything a lot clearer and more simple to understand. Remember this is the order properties need to be used.
background: color image attachment position;
Font Values
Similar to the background property the shorthand for the font property is also another great space saver and can make it a lot easier to see your CSS. Again, below is a longhand and shorthand example for the font property.
Longhand
font-style: italic;
font-variant: normal;
font-weight: bold;
font-size: 0.8em;
line-height: 1.6em;
font-family: Georgia, Times New Roman, Times, serif;
Shorthand
font: italic normal bold 0.8em/1.6em Georgia, Times New Roman, Times, serif;
This can be cut down further by taking out the normal font property as normal is the default for style, variant and weight on some tags but I prefer to cover all bases just to be safe.
Borders
I tend not to use the border property to often and it is always the one I can’t remember, so below for you and myself is the long and shorthand values.
Longhand
border-width: 1px;
border-style: dashed;
border-color: #000;
Shorthand
border: 1px dashed #000;
Then similar to the padding and margin properties you can apply border-width in a similar style if each top, left, bottom and right are different values.
Shorthand
border-width: top left bottom right;
border-width: 1px 2px 3px 4px;
List Type Properties
Two more to go, so not much more to take in but keep with it. The list property values is another of the shorthands I tend not to use but here we go anyway.
Longhand
list-style-type: circle;
list-style-position: inside;
list-style-image: url (img.jpg);
Shorthand
list-style: circle inside url (img.jpg);
Simple!
Outline
Outline is a property that doesn’t really have much browser support at the moment (Firefox Supports) and to be honest I’m not sure what the benefits are to this however this is another property that can be shortened.
Longhand
outline-color: #000;
outline-style: dotted;
outline-width: 1px;
Shorthand
outline: #000 dotted 1px;
I think that’s about it but I may have missed one along the way. Hopefully you will find this a good resource for helping you to cut down on your CSS coding and make your Stylesheets that much more effective. If you have found this article useful I would appreciate any comments, bad or good just let me know.
Tweet the Tiny Url for this post: 
Leave Your Response