|
July 26, 1998
 |
 |
Putting Style Sheets in Perspective
font-size
|
The font-size property specifies
the size of the font,
just as you would expect.
absolute-size
Values for absolute-sizes are computed and kept
by the browser, and the value is specified as a keyword.
The following table shows the syntax for specifying
absolute-size within the style attribute.
Absolute Values:
xx-small | x-small | small | medium | large | x-large | xx-large
<P style="font-size: xx-small">xx-small</P>
|
xx-small
|
<P style="font-size: x-small">x-small</P>
|
x-small
|
<P style="font-size: small">small</P>
|
small
|
<P style="font-size: medium">medium</P>
|
medium
|
<P style="font-size: large">large</P>
|
large
|
<P style="font-size: x-large">x-large</P>
|
x-large
|
<P style="font-size: xx-large">xx-large</P>
|
xx-large
|
The above example shows the absolute-size value applied
via the style attribute.
Adding the font-size to a large portion of a document or a
series of documents with the Style Attribute is as much work,
if not more, as adding <FONT SIZE="+1"></FONT>. It
makes much more sense to apply the font-size, (or any other
property), through the use of the
Style Element.
The example below shows it applied
to the P element within the style element. Now, wouldn't you
rather type this single line once than add FONT SIZE over and
over?
P { font-size: large;}
CSS2 suggests user agents use a scaling factor of 1.2
In English, this means that if the
medium font is 14pt, the large font would be 14 x 1.2 for
a final size of 16.8. The sizes may vary from one font
family to another.
relative-size
Relative-size is 'relative' to the document or parent element.
All documents have a font size, if it is not specified, then
it will default to what ever size is specified by the user
agent. Suppose the document default size is medium, then
an element that has a relative font size of larger will be
displayed as large text. If that same element is the child
of another element that has a specified font size of medium,
then 'larger' will display as large. Add yet another child element
with a relative-size value of larger and it will display
as extra large.
Relative Values:
larger | smaller
<P style="font-size: medium">
medium<BR>
<EM style="font-size: larger">large<BR>
<B STYLE="font-size: larger">larger</B>
</EM>
|
medium
large
larger
|
In the above example, P had an absolute-size of medium.
EM, a child of P had a relative size of larger,
B, a child of EM also had a relative size of larger.
Because of inheritance, B was relative to EM and not to P.
length
You may specify an absolute size in points, millimeters,
centimeters, inches, pixels or
other units with the length value.
Lengths refer to horizontal or vertical measurement and are
specified with [+-][number][unit identifier], with no
spaces between the characters.
H1 { font-size: 1cm }
|
header
|
H1 { font-size: 0.5in }
|
header
|
The two types values that may be applied to length are
relative and absolute. Relative lengths specify a length
relative to another length while absolute lengths are
dependent on the user agent. Absolute lengths are not
reliable as they may render difficult to read due to
individual browser configurations.
length values:
1
Relative
- em: font-size is relevant to the parent element font-size
- ex: font height relevant to the parent element font-size. ex
is determined by the x-height or height of the lowercase "x".
- px: font-size relative to the resolution of the viewing device
|
Absolute
- in: inches -- 1 inch is equal to 2.54 centimeters.
- cm: centimeters
- mm: millimeters
- pt: points -- the points used by CSS2 are equal to 1/72th of an inch.
- pc: picas -- 1 pica is equal to 12 points.
|
EM is a unit of measure that is relative to the font
size.2
In CSS, em is the font size. It's a scalable unit, i.e. changes
proportionally to the font size, as opposed to 'fixed' measures
such as points. It's used typically for the indent of the first
line of a paragraph or for indenting the left margin of a list
or spacing between paragraphs.
ex
EX is a unit of measure that is relative to the font size. The
measurement is equal to the fonts lowercase 'x', although an ex
value will be defined even if the font doesn't have a lowercase
'x'.
|
Pixel units are relative to the screen resolution of the viewing
computer. |
Child elements do not inherit the relative values specified for
their parent; they (generally) inherit the computed
values.2
Percentage
Percentage is relative to the parent element's font size. The
percentage value is the parent's font-size times the percentage.
A percentage of 120% will increase the size by 20%.
<STYLE TYPE="text/css">
<!--
.special {font-size: 12pt;}
.twenty {font-size: 120%;}
-->
</STYLE>
</HEAD>
<BODY>
<B class="special">
small font <I class="twenty">twenty percent larger</I>
</B>
|
|
small font twenty percent
larger
|
Notes:
1.W3C
2.
Cascading Style Sheets
Additional Resources:
Putting Style Sheets in Perspective:font-weight
Putting Style Sheets in Perspective: Table of Contents
Putting Style Sheets in Perspective: font
|
