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 selector types and grouping


Universal What are selectors, classes and id-attributes

Using the universal selector means, that defined properties are applied to any element. The browser doesn't try to find any specific element from the document. It just finds all possible elements, which CSS can be applied. Universal selectors have the lowest priority from the selectors.

A remembrance. As I have mentioned earlier whole tags are not identifiers, but something, which are inside tags work as identifiers. Concerning universal selectors, the identifiers are just names of the elements (generic identifiers) = tags without open and close delimiters and attributes. For example P or B work as identifiers (look at the term tree of the word identifier ([S][Pw]).

The bare universal selector is the most common way to select something. In the following examples is some other ways to use the universal selector in HTML-documents ([M][S][Pw]):

*{color:red;} /* the first sign is so-called wildcard, which is in this connection necessary; it is common habit to use wild cards (* and ?) in computer applications */
*.other {color:blue;} /* in this case the wild card in not necessary, because there is a separation dot and after the dot is so-called class selector, which I explain later */
.other {color:blue;} /* this is equal to the preceding way */

As you can see, selectors are connected into declaration-blocks (the explanation[S][Pw]). When a declaration-block has been affiliated into an announcement of some selectors, it is a rule. This is a very simple rule:

{font-family: Verdana, Arial, sans-serif;
font-size: 10pt;

The following conceptual scheme illustrates the relationships of different terms (the * means the universal selector or any other possible selector; The declaration-block can have multiple declarations):

selector property value
* { font-family : Verdana, Arial, sans-serif; }

Rules are called also as rule sets and statements. Exactly written rules are statement-blocks (or block-statements look at also the Footnote 1[Pw]). Simple rules and complex rule sets always 1) identifies the elements in a page that it affects and 2) tell the browser how to draw these elements (what are the properties of the selected elements).

Element type What are selectors, classes and id-attributes

The most common way is often too covering and in practice the universal selector has always some specifier. Element type selectors have the next higher priority. In fact the pattern matching principle begins really work from element type selectors, because the browser must search for individual targets. That's why the basic selector can be regarded a simple element type selector or just a type selector.

In this case the identifier is the name of an element. The following rule concerns the element H2 ([M][S][Pw]):

h2 {color:#660033; background-color:#ff3; border:#660033 1px solid; font-size:17px}

The element type name in the CSS-rule and the corresponding name inside start-tags create matching pairs.

Remember, that in XML element identifiers are always case sensitive. In XML the element type names in the CSS-rules and in the target documents must have the same cases.

Browser-specific notes:

  1. Into CSS3 has been added more XML namespace depending selectors (for example *|*, |* and ns|*, where ns is the XML namespace, which elements CSS should be applied). At least the universal selector related rules are supported in new Mozilla Gecko (for example Netscape 6.x+) and Opera 7.x browsers.

  2. MS IE 5.x+ support with non-standard way XML namespaces (ns\element).

W3C: CSS3 module: W3C What are selectors, classes and id-attributes (W3C Working Draft 26 January 2001).


So that same declaration-blocks should not be repeated to many elements, it is possible to use grouping. In a group can be called any type of selector with different combinations (I explain later, what some individual rules might mean). In this connection is elementary only to know, that individual members in the group are separated with commas. Here is some example of possible groups ([M][S][Pw]):

h1,h2,h3,h4,h5,h6 {color:red; background-color:yellow; border:red 1px solid;} /* in this group is only simple type selectors, which instead of separate definitions are defined at the same time; repeated commas are allowed and the list should not end with a comma */
h1, p.red {color:red;background-color:yellow;border:red 1px solid;} /* in this group the second member has class-specifier - I explain next the usage of it */
ol li, ol li li li {color:red;background-color:yellow;border:red 1px solid;} /* in this group is some matching patterns (I explain the usage of them in other connection) */

Footnote 1. The difference between statement and rule is, that statement has wider scope. Besides rules, which are connected to selectors, it includes also so-called at-rules (the list of at-rules[S]). CSS and HTML has also comments, which can be call as comment statements.

John Allsop: Statements[Pw].