Shorthand properties allow you to specify a set of related CSS properties with a single property. They combine related properties into a shorthand form. In most cases, the browser sets a default value if you leave out an optional one. There are six shorthand properties in CSS: The most commonly used properties are the font family of properties. With the font shorthand property you can turn this complete declaration: Into this: In most cases you'd specify just the size and face, like this: Instead of specifying up to four longhand padding or margin values, you can use the padding and margin shorthand properties. So instead of this: You can do this: Note that these values replicate according to the CSS specification when values are omitted. For our example above the top and right values replicate to the bottom and left padding respectively. The margin and border shorthand properties uses the same syntax. The border properties have eight shorthand properties (border-style/width/color, border-top/right/bottom/left and border). The most powerful is the border shorthand property which you can use when all sides of your element have the same values. So instead of this: You can do this to create a thin red line: You can use border properties in combination to null out each other to save space and create effects. For example: This abbreviated form of specifying style is supported by most modern browsers. You can combine shorthand properties with grouping to save even more. We'll cover grouping in an upcoming tweak.
p {
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: .9em;
line-height: 1.1em;
font-family: arial, helvetica, sans-serif;
}
p {font: italic small-caps bold .9em/1.1 arial,helvetica,sans-serif;}
p{font:.9em arial,helvetica,sans-serif;}
Padding and Margin Shorthand Properties
div {
padding-top:1em;
padding-right:2em;
padding-bottom:1em;
padding-left:2em;
}
div{padding:1em 2em;}
Border Shorthand Properties
div {
border-top: thin solid red;
border-right: thin solid red;
border-bottom: thin solid red;
border-left: thin solid red;
}
div {
border:1px solid black;
border-top:0;
border-right:0;
}
Further Reading
By website optimization on 4 Nov 2003 AM