Top 5 CSS Shorthand Properties

by Jeff Starr

/* font properties with default values */
font-variant: normal
line-height: normal
font-family: varies
font-weight: normal
font-style: normal
font-size: medium

These 6 declaration blocks can be combined into a single shorthand rule, ordered according to W3C specifications:

/* shorthand notation for font properties */
font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];
/* EXAMPLES */
font: 14px Georgia, serif;
font: 14px/1.4 Georgia, serif;
font: italic lighter 14px/1.4 Georgia, serif;
font: italic small-caps lighter 14px/1.4 Georgia, serif;

Background Properties
/* background properties with default values */
background-attachment: scroll;
background-color: transparent;
background-position: top left;
background-repeat: repeat;
background-image: none;

/* 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[/img]) 0 0;
background: #777 url([]http://domain.tld/images/bg.png[/img]) repeat-x 0 0;
background: #777 url([]http://domain.tld/images/bg.png[/img]) repeat-x fixed 0 0;
There are many nuances regarding proper syntax and usage of the background shortcut, so see the official documentation for all the juicy details.