5 ways to write Css Shorthand

webdesign

New member
Joined
Jul 5, 2012
Messages
234
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
6
Views
3,275
Replies
3
Views
4,315
Replies
4
Views
2,728
Replies
18
Views
5,898
Replies
17
Views
7,789
Newer threads
Replies
30
Views
11,950
Replies
6
Views
3,807
Replies
20
Views
9,689
Replies
8
Views
6,060
Replies
10
Views
5,390
Latest threads
Replies
6
Views
117
Replies
2
Views
89
Replies
0
Views
79
ReH
Replies
3
Views
125
Recommended threads
Replies
9
Views
3,354
Replies
2
Views
2,206
Replies
4
Views
1,824
Similar threads

Latest postsNew threads

Referral contests

Referral link for :

Sponsors

Latest Blog ArticlesMost Viewed Threads

Popular tags

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