Today we’ll be talking about the short form of properties/values. While we have briefly touched on this topic in past articles, I want to go over it a bit more in-depth. Using CSS short form is a way to code faster and more efficiently (as it results in smaller stylesheet filesizes, which are faster to download).
Most property families that have multiple related properties will have an all encompassing property that allows you to specify values for all or most of the properties in the same family. These short form properties usually have different syntaxes, so you’ll have to remember them. We’re going to go over a few so that you can get the feel for them.
Margin and Padding
While you can specify different top, bottom, left and right values for margin and padding, that can be a tedious amount of typing to little result. It is much easier to use the short form of these properties. For these properties, you can either specify one, two or four values. Which look like this:
One Value
[code='css']#element {
margin: 5px;
padding: 5px;
}[/code]
A margin and padding of 5px will be applied to all sides.
Two Values
[code='css']#element {
margin: 10px 2px;
padding: 10px 2px;
}[/code]
A margin and padding of 10px will be applied to the top and bottom, while a margin and padding of 2px will be applied to the left and right.
Four Values
[code='css']#element {
margin: 2px 5px 10px 15px;
margin: 2px 5px 10px 15px;
}[/code]
In this example, and margin and padding of 2px will be applied to the top, 5px to the right, 10px to the bottom and 15px to the left. The values are specified in a clockwise rotation starting from the top.
Border
The border property can only accept one value, which is used for all four sides, however, we can specify the border width, style and colour separately in short hand form. For this we use the border-width, border-style and border-color properties. The syntax of the values is similar to margin and padding, in that you can specify one, two or four values, and they will be used in the same order.
[code='css']#element {
border-width: 1px 5px 7px 3px;
border-style: solid dashed dotted double;
border-color: #000 #0099CC #CCC #F9F9F9;
}[/code]
Background
The background property encompasses the background-color, background-image, background-repeat, background-attachment and background-position properties.
[code='css']body {
background: #0099FF url('background.png') repeat-x scroll top center;
}[/code]
Concluding…
Unless I think of something we missed in the CSS topic before next week, this marks an end to our CSS series. However, we’ll will be using CSS in upcoming series. If you want to learn more about CSS, W3 Schools and the SitePoint CSS Reference are great places to look.
