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.

Basic ideas


Basic metaphors

Browsers interpret all definition by certain rules. Most of rules base on the document tree. Besides the tree metaphor in the computer language is used the family and kinship metaphor. We talk about for example parents and child. A parent element might have required and then also in a way "natural" children (child elements can be also non-necessary).

This relationship describes a simple document tree:

BODY  - H1 (this element don't have any natural child)
- P
- OL (an ordered list, which must have at least one child-element )
LI (individual list-element, which is the necessary child of the element OL)
LI (another list-element ; list-elements can have many level of sub-lists and then OL can have "grandchildren")

Most of the rules are named using the family metaphor. It is also remarkable that rules handle element levels, nested elements and bilateral relationships of individual elements in the document tree (this model works partially also with attribute selectors, but as I have told, attribute selectors don't work today in official browsers). I handle also in this connection the :first-child pseudo-class selector, because it is a part of whole system. It can be understand only in connection to other relationships. I try to explain everything as grass-root level as I can! Parts of the metaphor are:

  • Parent = parent level element. When we write about parent, the parent must have at least one child-level element. We must remark, that only the next sub-level elements are children. Parent is the direct surrounding element and between parent and children are not other element levels.
    Hen and chicken
  • Child = any child-level element, which have a direct parent-level element. A child is a part element of the parent level element.
  • First-child = the next level element after the parent level element (in the case of :first-child an individual element)
  • Ancestor = any element, which has inside it another elements. Partially the same as parent, but there can be several nested element levels between elements.
  • Descendant = any element, which is inside another elements. Partially the same as child, but there can be several nested element levels between elements. "Grandchildren" are always descendant elements.
  • Adjacent sibling = sibling level elements have the same parent and elements are not nested with each others. They are in parallel relationship to each others like sisters and brothers. An adjacent sibling is the next at same level being element level after the first mentioned element in the same level. CSS2 uses also more exact terms, which are listed below and they are related to the adjacent sibling.
    • The preceding sibling. The adjacent sibling definition gives only the element level. In the family is single first-born and after him becomes other children. In order to name the first-born, it must have pseudo-class :first-child. The preceding sibling is just the first-born, who is preceding before other siblings.
    • The following sibling. Some other siblings in the same "element family".
    • The preceding element. The element, which is a previous element or in the previous element level as the adjacent sibling.
    • Following element. The opposite relationship to the previous.
W3C: CSS2: 3 Conformance: Requirements and Recommendations[Pw].



In family children inherit their parents and descendant got his inheritance from his ancestor. It is essential to understand inheriting rules and the mechanism, which is called inheritance. Inheritance means the automatic mechanism, how properties are applied into elements. The principle concerns nested elements, which are parts of the document tree[S][Pw].

The inheritance of properties, which are give to the BODY-element works fine with certain block elements and their necessary child-elements. Automatic inherited properties are primary most font and text types.

Elements, which effect to the text, like H1-H6, B and I retain in variable level their characteristic features. H1-H6 keeps their relative sizes compared to the basic text, but most text style definitions are inherited from the element BODY. Some text elements retain their features even if CSS to BODY has defined. The reason why some font-related properties are not inherited to all possible elements is the fact that some elements have been predefined in the default settings of the browsers. The quantity of predefined elements is browser-dependent. Because of this reason some browsers need more CSS than some other browsers. In some browsers inheritance doesn't work correctly, but I handle some difficulties later.

All properties like background properties are not inherited from parent to child (in the appendix of CSS2 specifications is a table, which tells, which properties are inherited and which not). Children are in that means independent, that they can get own definitions.

Into the CSS specification has been added the value inherit (like TABLE {color:inherit;}), which means that all definitions are inherited from closest parent element. This is certain kind of "forced inheritance".

Browser-specific notes:

  1. I don't recommend to use the value inherit, because many browsers, which in other matters handle quite well CSS, don't support it. In my tests it has worked only in Mozilla 0.7 and Mozilla 1.1a but not in all relative Mozilla Gecko browsers.

W3C: CSS2: Appendix F. Property index[Pw].