[Top]
More advice for the full screen mode.
   
Sivut toimivat riittävän hyvin MS IE 4.0+, Opera 5.x+, Netscape 6.0+/ vast. Mozilla ja Konqueror 3.x selaimilla. Yleisesti ottaen sivut toimivat parhaiten uusimmilla Opera selaimilla. Sivujen toimivuus vanhemmissa selaimissa on heikko, erityisesti Netscape 4.x kohdalla.

I list below all topic groups, which I have done according to subjects, which they handle. You can return to this topic group by using this menu and the link Table of topic groups on the top of the each page.
 
 
Search:
[Help]

Basic definitions for texts

To the element BODY is reasonable give basic font-size and font-family properties([M][S][Pw]):

body
{font-family: Algerian, "Times New Roman",serif;
/* note quotes if the name of font have spaces - without quotes the browser doesn't necessary find the right font-face */
font-size:small;}
/* it is recommended to use in the base font size relative units */

The browser goes font-families in order. First two are installed font-faces. The third (serif) is so called as a generic font family, which are serif, sans-serif, cursive, fantasy and monospace. Browsers can decide with certain criterion, which font they use and they can offer different font faces.

W3C: CSS2: 15 Fonts, 15.2.6 Generic font families[Pw].

In headers is reasonable to use rich properties. I have collected to the following example a collection and I have mentioned properties, which belongs only into the CSS2 specification ([M][S][Pw]):

h2
{color: #660033;
/* the color of the text as keyword value */
font-family: Algerian, "Times New Roman",serif;
font-weight: bold; /* how thick font is used - in this case as keyword value */
font-size: 18pt; /* absolute font unit */
font-style:oblique; /* almost like italic - the computer slant the normal font (the default value is normal) */
font-variant:small-caps; /* all letters are big, but small letter are lower */
text-transform:capitalize; /* quite like the previous definition - the first letter of the word is in upper case (other values are lowercase and uppercase); Note, that lowercase cancels the previous definition! */
text-decoration: overline; /* other possible values: none, underline, line-through, blink; This value is not automatic inherited */

font-stretch:wider; /* it should make the font wider (CSS2) */
text-shadow: 5px 5px red; /* defines shadows for texts (CSS2) */ }

Browser-specific notes:

  1. font-variant:small-caps works properly in MS IE for Windows browsers starting from the version 6.0.

  2. text-decoration: blink works only in Netscape, Mozilla Gecko and Opera 5.x+ browsers.

  3. font-stretch and text-shadow properties don't work in any tested browsers.

In the previous definitions it is remarkable font-weight value. In theory a font family can have nine font-weight values, which are marked 100-900 like font-weight:600 (I don't know any, which have so many). The value of normal is 400 and bold is 700. Browsers use certain algorithms to fill holes. In order to temporary exchange font-weight is possible to use keywords lighter and bolder, which I don't recommend as basic values.

Font properties can be defined also as shorthand properties, which includes also the line-height property ([M][S][Pw]):

... {font: normal small-caps 120%/120% fantasy;} /* shorthand definition to fonts: the first %-value is for relative font-size and the latter concerns the line-height property (the value of the property can be expressed exceptionally also without the unit: 1.2 = 1.2em); In my mind it is however in this case easier to control separate properties */
 

Browser-specific notes:

  1. Propertiesline-height:1.2em and line-height:120% are different in new Netscape/ Mozilla browsers in situation, when the user of the browser scales fonts. The percentage value is scalable but em-value doesn't.

  2. Some properties, which are used with text don't work just any browser. In my mind it is not sensible to use these even if in future Netscape 6.0 understand them: word-spacing, letter-spacing, white-space, word-wrap. Letter-spacing is most useful of them, because many browsers support it ([M][S][Pw]).

[Top]