CSS font shorthand property

The CSS font property is a shorthand property for setting font-style, font-variant, font-weight, font-size, line-height and font-family.

CSS property font

CSS version:	CSS 2.1
Value:	[ [ font-style \|\| font-variant \|\| font-weight ]? font-size [/line-height]? font-family ] \| caption \| icon \| menu \| message-box \| small-caption \| status-bar \| inherit
Initial:	see individual properties
Applies to:	all elements
Inherited:	yes

Few points to note:

First three values are optional (font-style, font-variant, font-weight). If not specified, these take normal value.
line-height is also optional
font-family can have multiple comma separated values to have fall back fonts families. In case first font-family is not available, next one is taken and so on.

Some font shorthand values:

p { font: 12px/14px sans-serif; }
p { font: 80% sans-serif; }
p { font: normal small-caps bold 12px/14px sans-serif; }

Valid values for system predefined fonts. Note that system fonts may only be set as a whole.

caption	The font used for captioned controls (e.g., buttons, drop-downs, etc.).
icon	The font used to label icons
menu	The font used in menus (e.g., dropdown menus and menu lists).
message-box	The font used in dialog boxes.
small-caption	The font used for labeling small controls.
status-bar	The font used in window status bars.

In the following code, CSS property font can be changed to the following values

<style type="text/css">
div {
  width: 100px;
  font: 12px/14px sans-serif;
}
</style>
<div>This is sample text to test font shorthand property</div>