5 ways to write Css Shorthand

CSS shorthand, code is cleaner, easier to manage and edit more, reduce file size CSS.

5 shorthand commonly used in CSS

Below are five ways commonly used abbreviations in CSS
1 - Short with Margin and Padding properties

Margin and Padding in his article mentioned two shorthand for this property, you can learn more in this article in CSS Margin and Padding.

Shorthand for the Margin and Padding is identical:
The value is calculated from the position Top

The value is calculated from the position Top

Positions obey rules clockwise (Top, Right, Bottom, Left) Top starting position.
From our position on the components can be calculated. Selector margin as follows:
- Margin-top: 2px
- Margin-right: 4px
- Margin-bottom: 6px
- Margin-left: 8px
When there is an edge that are vacant, it will take the opposite value
Here the left side are vacant, which will take the value of the opposite (right) as the value => margin-left: 4px
Here the left and right side missing, so the bottom edge will get the value of the upper edge (2px), will take the next left edge of the right value (4px).
In this example, only one side is declared, then all the edges have a 5px margin
2 - Short for Border attribute

The order stands for the border attribute as follows:

border-width »border-style» border-color

a, Short for all the edges
a, Short for each side separately
A. Selector {border-top: 1px solid # cfcfcf}
3 - with attributes Short Background

Rules written with background attribute as follows:
But you do not need to declare the full value, if one of the missing value, it will take the default value of that attribute.
For example:
Write off the list-style properties

4 - The order stands with list-style properties as follows:

list-style-type 'list-style-position »list-style-image

For example:
1 ul li {list-style: circle inside url (icon.gif)}
with Shorthand font property

5 - Rule stands for Font attributes
For example:
CONCLUSION

There can be little surprise when you get familiar with the CSS shorthand, but when you capture it is useful to you.