5 ways to write Css Shorthand

webdesign

Well-known member
Joined
Jul 5, 2012
Messages
120
Points
0
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:
Code:
Selector {margin: 2px 4px 6px 8px}
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
Code:
Selector {margin: 3px 4px 5px}
Here the left side are vacant, which will take the value of the opposite (right) as the value => margin-left: 4px
Code:
Selector {margin: 2px 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).
Code:
Selector {margin: 5px}
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
Code:
Selector {border: 1px solid # cfcfcf}
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:
Code:
selector {background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position]}
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:
Code:
Mybox {bakground: url (background.gif) no-repeat top right}
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
Code:
Selector {font: [font-style] [font-variant] [font-weight] [font-size] [font-family]}
For example:
Code:
H1 a {font-style: bold 12px arial}
CONCLUSION

There can be little surprise when you get familiar with the CSS shorthand, but when you capture it is useful to you.
 
Older Threads
Replies
3
Views
4,857
Replies
3
Views
3,402
Replies
1
Views
2,175
Replies
0
Views
2,134
Newer Threads
Replies
0
Views
2,216
Replies
4
Views
3,143
Replies
4
Views
2,967
Replies
19
Views
8,597
Recommended Threads
Replies
5
Views
3,655
Replies
3
Views
3,971
Replies
8
Views
6,178

Latest Hosting OffersNew Reviews

Sponsors

Tag Cloud

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top