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>
Applies to all elements 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 elements Is Inherited |
normal, italic, oblique - {"inherit" is also acceptable} Example: H1 { font-style: oblique } or P { font-style: normal } |
Applies to all elements Is Inherited |
normal, small-caps - {"inherit" is also acceptable} Example: DIV { font-variant: small-caps } |
Applies to all elements 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 elements 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.
| 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 elements 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 elements 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 elements. |
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 elements. |
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 elements 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.
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 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 }
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:
