Shorthand+Properties

=CSS: Shorthand Properties=


 * Summary**: Use shorthand properties in CSS to shrink your style sheets.

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:
 * font
 * background
 * padding
 * margin
 * border
 * list

Font Properties
The most commonly used properties are the font family of properties. With the font shorthand property you can turn this complete declaration: p { font-style: italic; font-variant: small-caps; font-weight: bold; font-size: .9em; line-height: 1.1em; font-family: arial, helvetica, sans-serif; }

Into this: p {font: italic small-caps bold .9em/1.1 arial,helvetica,sans-serif;} In most cases you'd specify just the size and face, like this: p{font:.9em arial,helvetica,sans-serif;}

Background Properties
Many stylesheets include multiple selectors with background properties. Included individually, the 5 background properties require a considerable amount of code. Here they are in all their verbose glory, along with corresponding default values. /* background properties with default values */ background-attachment: scroll; background-color: transparent; background-position: top left; background-repeat: repeat; background-image: none; Fortunately, most designers are more familiar with the shorthand notation than the individual properties themselves. To clean things up, these 5 declarations can be combined into a single shorthand rule, here ordered according to W3C specifications: /* shorthand notation for background properties */ background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];

/* EXAMPLES */ background: #777; background: url(http://domain.tld/images/bg.png) 0 0; background: #777 url(http://domain.tld/images/bg.png) repeat-x 0 0; background: #777 url(http://domain.tld/images/bg.png) repeat-x fixed 0 0;

Padding and Margin Shorthand Properties
Instead of specifying up to four longhand padding or margin values, you can use the padding and margin shorthand properties. So instead of this: div { padding-top:1em; padding-right:2em; padding-bottom:1em; padding-left:2em; } You can do this: div{padding:1em 2em;} 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.

Border Shorthand Properties
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: div { border-top: thin solid red; border-right: thin solid red; border-bottom: thin solid red; border-left: thin solid red; } You can do this to create a thin red line: div{border:thin solid red;} You can use border properties in combination to null out each other to save space and create effects. For example: div { border:1px solid black; border-top:0; border-right:0; }

List Properties
There are 3 CSS list properties available for your lists. These properties address all of the essentials: type, image, and position. Here they are along with their default values:

code /* list properties with default values */ list-style-position: outside; list-style-image: none; list-style-type: disc; code

Not //too// crazy, but we can certainly simplify. These 3 declarations can be combined into a single shorthand rule, ordered according to W3C specs: code /* shorthand notation for list properties */ list-style: [list-style-type] [list-style-position] [list-style-image];

/* EXAMPLES */ list-style: none; list-style: disc; list-style: disc outside; list-style: disc outside url(bg.png); code About as simple as it gets – basically just shortening the name of every list property across the board for any combination of values. Pretty slick.