There are a lot of CSS properties that share common names; for example, margin-top, margin-right, margin-bottom, margin-left. Sometimes it gets pretty tedious and confusing to type all of those similar properties, for that reason the CSS shorthand method was created. The CSS shorthand method helps us to increase speed, decrease file size, and be concise. Instead of typing four times the margin property, we can type margin and include all its specifications inside a single property. Let’s learn the different ways to do this:

STEP ONE:

Create a HTML page with different tags; such as, headings and paragraphs. Then, link a CSS file to it.
Choose any element of your page and within the CSS give it a different top, right, bottom, and left padding value:

As you can see, I separately specified each value. Now, let’s learn how to use shorthand to simplify this property: 

Easy, huh?
I typed padding one time and I specified each value inside of it. 

NOTES:

  • Make sure to follow this order when specifying: top, right, bottom, and left.
  • The same method can be used for the margin property.

STEP TWO:

Now, let’s learn how to specify a property when all the values are the same.
For my paragraph tag I specified (using the old way) a padding of 15px for all its sides:

There is no need to specify the same number over and over again, just type the following and you will have 15 pixels on every side of the paragraph box:

STEP THREE:

What about if the top and bottom and right and left share the same values? No problem! You can abbreviate it as shown below:
Old way: 

Using shorthand:

I specified the top and bottom value first and then the right and left value.

STEP FOUR:

Yes, shorthand is also flexible with other CSS’s properties. Here is an example of how to use it for the background property:

Beneath I used three different background’s properties to specify distinct elements, color, image, and repeat. In this case, the shorthand method is even more flexible, because it lets us specify them in any order. Here is how I shorthanded my background properties:

Now, it’s time to know if you learn how the shorthand technique works. Give it a try and abbreviate the following border properties:
border-top: 10px;
border-right: 8px;
border-bottom: 10px;
border-left: 15px

Let me know your answer!

Download Source Files