What is this CSS Shorthand?

Each CSS property has its own name and value. But the technique of grouping similar CSS properties by just setting values to the generalized name. I am sure that you will understand it better at the end of this tutorial.

Why should I use CSS Shorthand?

By using CSS shorthand technique, you actually have the following benefits:

• You reduce the CSS file size which proportionally reduces the load time.
• CSS code will be clean and easy to manage.
• It proves that you are an expert in CSS.

So why are you waiting? Teach me.

Ya, Lets start. I am going to take you through each property which can be minimized. First I will show you the expanded version, then the procedure to minimize it.

Background:
The list of properties available for background and their default values:

• background-color: transparent
• background-image: none
• background-repeat: repeat
• background-position: scroll
• background-attachment: top left

You don’t have to give each property separately, instead we use a single property “background“. Here is an example:
div{background:#000 url(images/picture.jpg) no-repeat center 50% fixed;}
Here the color, image URL, image repeat, position and attachment properties are described in just one line. Even if you leave out any of the properties, the default values are used. If you notice the code, you can see that I have used hexadecimal(hex) value for color. Usually hex values are 6 digits but here I have used a shortened version. You can shorten the digits if they appear in pairs. For example, #666666 can be written as #666, #44BBAA can be written as #4BA but you cannot shorten color values like #693B45 or #EE4423.

I wish to stop this tutorial right here and request you to get some practice in this topic. The next part of this tutorial will contain techniques to reduce other CSS properties. I will update here once the next part is released. Happy coding.

Update: CSS Shorthand – Simplified (Part 2) published.