(Last Updated 11/27/98)

(Cascading Style Sheets Part 2)

Definition and Manipulation of


Until we get to the Web_Font.html paper, you may as well get accustomed to the first law of Browsers:

Law # 2 is

Style sheets provide a way of contravening Law #2 if not the First law. They allow the designer to list several fonts in preferential order. You should, of course, end your list with one of the generic family names that are always available. The generic fonts (with an example) are:

Fonts are defined in style sheets either appending the style directly to the Tag name:

H1 { font-family: helvetica; color: blue }

by defining a Class name for the property set and using the "Class" attribute of the tags:

.blueT {}
<P class="blueT">This paragraph uses the "blueT" class style definition.</P>

or by defining an ID for the property and using the "ID attribute of the tag.

#FF2 { font-family:  helvetica, Arial, Sans-Serif }
<A ID="F2">Helvetica or Arial or Sans-Serif writing</A>

FONT Properties

Applies to all

Is Inherited
Generic Family:   Serif, Sans-Serif, cursive, fantasy, monospace
Family Name:   Times, Arial or Helvetica, Zapf-Chancery, Western, Courier
Example: P { font-family: "New Century Schoolbook", Times, serif }
Applies to all
Is Inherited
normal, italic, oblique - {"inherit" is also acceptable}
Example: H1 { font-style: oblique }   or   P { font-style: normal }
Applies to all
Is Inherited
normal, small-caps - {"inherit" is also acceptable}
Example: DIV { font-variant: small-caps }

Applies to all

Is Inherited
absolute-weight: normal, bold - {"inherit" is also acceptable}
relative-weight: bolder, lighter
by degree: 100 (= normal), 200, 300, 400, 500, 600, 700, 800, 900 (= bold)
Example: SPAN { font-variant: small-caps }   or   P { font-weight: normal }

Applies to all

Is Inherited
absolute-size: xx-small, x-small, small, medium. large, x-large
relative-size: larger, smaller
percentage: +/- x%           {"inherit" is also acceptable}
length (relative)
Example: H1 { font-size: large }   or   P { font-size: 12pt }
               LI { font-size: 90% }   or   PRE { font-size: larger }

EM { font-style: italic; font-weight: bold; font-size: 150%; text-transform: lowercase }
H1,H2 { font-family: Arial, Times New Roman, serif; }

*   Font-Variant is NOT supported by all browsers.

TEXT Properties
Sets the amount of white space between words
Values: normal or length (abs. or rel.)
Example: P EM { word-spacing: 0.4em }   or   P.note { word-spacing: -0.2em }
Sets the amount of white space between letters.
Values: normal or length (abs. or rel.)
Example: H1 { letter-spacing: 0.1em }   or   P.note { letter-spacing: -0.1em }
Applies to all
NOT Inherited
Applies text effects. Combinations of the values are acceptable.
Values: none, underline, overline, line-through, blink
Example: A:link, A:visited, A:active { text-decoration: none }
Sets the vertical alignment of the baseline with respect to its parent.
Negative values are acceptable.
Values: baseline, middle, sub, super, text-top, text-bottom, top, bottom
Example: IMG.middle { vertical-align: middle }   or   .car1 { vertical-align: super }
Applies to all
Is Inherited
Sets the case of the letters to that chosen (capitalize sets first letter to UC).
Values: none, uppercase, lowercase, capitalize
Example: H1 { text-transform: uppercase }   or   H2 { text-transform: capitalize }
Applies only to
block level
Sets the horizontal alignment of the text in an element.
Values: left, right, center, justify
Example: P { text-indent: 5em }
Applies only to
block level
Sets the indentation of the first line in an element.
Negative values are acceptable.
Values: length (abs. or rel.) or percentage (+/- x%)
Example: P { text-indent: 5em }
Applies to all
Is Inherited
Sets the vertical distance between baselines.
Negative values are NOT permitted.
Values: normal, number, length (abs. or rel.), percentage (+/- x%), "inherit"
Example: P { line-height: 200% }

*   Overline is NOT supported by NN-4 & Blink is NOT supported by IE-4. Cute.

Relative Lengths

For each of the length values above, there are 2 types of units that are accepted: relative and absolute. Relative units specify the length relative to another length. Style sheets using relative units easily scale between mediums (computer display & laser printer etc.).

The relative units that are supported are: "em", "ex", and "px".


P { margin: 0.5em }
P { margin: 1ex }
P { margin: 12px }

sets the document margins to: 1/2 the font height; the height of the letter x; and 12 pixels respectively.

Absolute Lengths

Absolute length units are more easily pictured but, since the display medium is always open to question, their utility is less. The absolute units supported are: "in" (inches), "cm" (centi-meters), "mm" (millimeters), "pt" (points = 1/72 in), and "pc" (picas = 12pt).

H1 { margin: 0.5in }
H2 { line-height: 2cm }
H3 { margin: 12.6mm }
H4 { font-size: 12pt }
H5 { font-size: 1pc }

Font & Text Examples

Weight / size (points)
100/14   300/16   500/18   700/20   900/22
lighter lighter

text-decoration / text-transform
line-through   blink   uppercase

Drop Caps

This example drop caps was actually found on another page but I think its interesting and clever. It produces them without running into any browser compatibility problems. It relies on the first letter of the paragraph being placed in a span element. This allows it to be treated differently than the remainder of the paragraph.

To achieve this a class selector was defined as:

.dropcap {
    float: left;
    font: bold 1.4em "Times New Roman", serif;
    color: rgb(51, 0, 102);
    background: rgb(255, 255, 153;)

and referred to with <SPAN class="dropcap">T</SPAN>his example ...


Other CSS & CSS Related pages:

Top of Page

Contact Carl Paulson with questions,
or Visit my pages.

Other Programming & Scripts Pages

| Main Page | Java | C++(not yet active) | HTML |
| Java Script | mIRC / LittleStar | IRCLE | Shadowbot | Apple |