Learn how to Shorthand CSS Properties

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:

Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.

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:

.footer {
                padding-top: 30px;
                padding-right: 10px;
                padding-bottom: 5px;
                padding-left: 8px;
}

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

.footer {
                padding: 30px 10px 5px 8px;
}

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:

p {
                padding-top: 15px;
                padding-right: 15px;
                padding-bottom: 15px;
                padding-left: 15px;
}

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:

p {
                padding: 15px;
}

We stand behind Server Intellect and their support team. They offer dedicated servers, and they are now offering cloud hosting! 

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: 

h2 {
                margin-top: 5px;
                margin-right: 10px;
                margin-bottom: 5px;
                margin-left: 10px;
}

Using shorthand:

h2 {
                margin: 5px 10px;
}

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:

.header {
                background-color: white;
                background-image: url(images/HeaderBg.jpg);
                background-repeat: repeat-x;
}

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:

.header {
                background: white url(images/HeaderBg.jpg) repeat-x;
}

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!

We used over 10 web hosting companies before we found Server Intellect. Our new server with cloud hosting,was set up in less than 24 hours. We were able to confirm our order over the phone. They responded to our inquiries within an hour. Server Intellect’s customer support and assistance are the best we’ve ever experienced.

Download Shorthand CSS File