Below are five demonstrations of font properties. Please read the
text of the examples as further explanations are contained therein.
Rule Example 1.
{font-family: Arial; font-size: 14px; font-style: italic; font-weight: bold; color: red;}
Will display as:
This text is defined by the the font properties of Arial face, at size 14 pixels,
italic, bold and color red.
Rule Example 2.
{font-family: comic sans ms; font-size: 18px; color: orange;}
Will display as:
This text is defined by the the font properties of comic sans ms face,
at size 18 pixels and color is orange.
Rule Example 3.
{font-family: Arial; font-size: 10pt; color: blue; line-height: 30px;}
Will display as:
This text is defined by the the font properties of Arial face, at size 10 points,
color blue, and the line height is 30px. Notice the space between lines is greater
than the default line-height for browser text. This is because the line-height
property has a value of 30 pixels.
Rule Example 4.
{font-family: "Times New Roman", Times; font-size: 25pt; font-variant: small-caps;
color: green; }
Will display as:
This text is defined by the the font properties of Times New Roman face, at size 12 points,
variant small-caps, and the color is green. Notice is it common to code in more then one
font face. In this example the font Times is included as secondary font in case
visitors do not have Times New Roman on their computers. Also notice that because there
is more then one font listed, any font name that is more then two words is in parentheses.
Rule Example 5.
{font: 12px/20pt verdana; color: blue;}
Will display as:
This text is defined by the the font properties of verdana face, at size 12 pixels,
line height of 20 points and color blue. Notice though the syntax has a shortcut. The font proptery
is written as just "font:" and then the values are written in a specified sequence
with no commmas or ; between them. The value sequence for the font property shortcut
is font-style, font-variant, font-weight, font-size/line-height and font-family in
that order. Only the values you want displayed need to be listed.
Another example of the shortcut would be:
{font: italic bold 14pt helvetica; color: red}