|
July 26, 1998
 |
 |
Putting Style Sheets in Perspective
font
|
The font property is a shorthand method of including all of
the previous font properties in one rule.
So, it's about time we got a shortcut for all that typing. But
how do we put it together? It's really pretty simple.
In our example, we'll use the P element as the selector.
Follow the Selector with your Declaration. Suppose we wanted to
add an italic bold text. We want it to be 12pts with a line
height of 14pts, and we want it in the sans-serif family. That's
going to be an awful lot of typing for just one text style, isn't
it.
But, it's not near as bad as it sounds, nor as confusing.
Using the font property, we don't have to type
each property, just the values.
Our rule would look like this:
P { font: italic bold 12pt/14pt Arial, Verdana, sans-serif }
The different values are separated only by a space while the
font-family options are separated by commas. The font-size and
line-height are separated by a forward slash.
The table below shows you an example of
the font-property, what you would have typed 'longhand' and what
it really means if you'd typed the properties which you aren't
setting explicitly. When a property is not explicitly set, it will
default to its initial value. In the example below, we did not
set font-variant or line height. Since we didn't specify these
properties, they automatically take the default value of normal.
P { font: italic bold small Arial, Verdana, sans-serif}
is the same as:
P { font-style : italic;
font-weight : bold;
font-size : small;
font-family : Arial, "Verdana", sans-serif;
}
and really means this:
P { font-style : italic;
font-variant : normal;
font-weight : bold;
font-size : small;
line-height : normal;
font-family : Arial, "Verdana", sans-serif;
}
Additional Resources:
Putting Style Sheets in Perspective:font-size
Putting Style Sheets in Perspective: Table of Contents
Putting Style Sheets in Perspective: line-height
|
