Marusya's School Notes

Font Shorthand

The syntax order of the font shorthand is:

font-style
font-variant
font-weight
font-size/line-height
font-family

This example demonstrates how to use the shorthand property for setting all of the font properties in one declaration:

HTML file:	Displayed by browser:
<style> p.ex1 { font: 15px arial, sans-serif; } p.ex2 { font:italic bold 12px/30px Georgia, serif; } </style> <body> <p class="ex1">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p> <p class="ex2">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p> </body>	This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

HTML file:

Displayed by browser:

<body>
<p class="ex1">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>

<p class="ex2">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>
</body>

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

You need to supply at least font-size and font-family for the shorthand to work, otherwise it'll just be a syntax error and do nothing.