CSS Short Hand Font Tag

Up until now I have never bothered with the css font shorthand attribute, always opting to use the individual attributes instead, solely due to my lack of understanding of how it is structured. After coming across it in some web updates I have recently completed I decided to investigate and understand what it all means.

The css font tag looks more baffling than other css shorthand tags, take the border tag for example:

border : 1px solid #000;

A 1 pixel solid black border, easy. Now take the font tag shorthand..

font: italic small-caps bold 12px/18px Verdana, Arial, serif;

What on Earth is that all about… Well, if we break it up we see that we have:

Style, Variant, Weight, Size / Line Height and Family.

The first 3 aspects, Style, Variant and Weight are all optional as is the line height. If line height is omitted then so is the forward slash that splits size and line height. The family must always come last and along with the size is mandatory.

I had no idea it was that simple.