Concise CSS Font Definitions Save Space and Time

When defining a style with multiple font properties, you can save space and enhance readability by collapsing the font attribute values into a concise notation. A restriction of using this notation is that you must define the font-style and font-weight attributes first, then the font-size, then the font-family names.

The following code shows the verbose way of defining a style:

 .header {font-family: Arial;	font-size: 16px;	font-style: normal; 	line-height: 20px;	font-weight: bold}

Whereas the following line encapsulates all of the above into a much smaller single line:

 .header {font: bold 16px/20px Arial;}
Share the Post:
Share on facebook
Share on twitter
Share on linkedin

Overview

Recent Articles: