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.

HTML 4.0 + CSS and the aims of CSS

With HTML 4.0 and CSS, the basic idea is to separate presentation from content. CSS works to assist the display of HTML. CSS means the following (I handle terms in logical order):

  1. Style = special style declarations and rules used to specify the presentation of elements (I handle them later thoroughly).
  2. Style Sheets = style declarations and rules are collected into sheets. A single style sheet is the location of one or more real or logical rules. These rules specify the presentation of a document (the specifications have some inaccurate definitions, which I handle in the Footnote 1[S][Pw]).
  3. Cascading = style sheets can be connected and cascaded - thus the reference to Cascading Style Sheets. Look at the logo of CSS - it shows the basic idea of CSS!
    CSS-logo - get it!
Cascading Style Sheets

CSS combines style declarations and rules from different sources. That's why the term is constructed as a plural (sheets). Styles have different weights compared to each others.

CSS is not however an independent language, because it can only be used to assist other languages (primarily HTML, XML and XSL). The term "formatting" refers primarily to visual formatting, but CSS can be used to format documents in other ways as well. CSS exists solely for the formatting of documents.

CSS is similar to scripting languages like JavaScript and ECMAScript, in that it can be used as small fragments inside the main document. Also, CSS syntax has some similarities to these scripting languages even if CSS is not a programming language.

CSS1 is a simple style sheet mechanism that allows authors and readers to attach style (e.g. fonts, colors and spacing) to HTML documents. It is not an actual layout language but rather very limited formatting language.

Instead CSS2 can be call as an almost fully featured layout language, because it can create most layout features, which are needed in web documents. Indeed CSS2 has some missing features. These are added into CSS3[S]).

If a browser were to have full implementation of CSS2, it would at change the character of HTML documents at a fundamental level because the formatting features of most HTML elements could be redefined. Then HTML itself would not be used just at all as a formatting language. CSS cannot, however, exchange the real order of elements (it can hide elements from the screen or reposition them - how it happens, I will explain later).

With it's methods of formatting and layout, CSS aims to:

  1. separate presentation from content.

  2. partially separate structure from content. CSS doesn't separate these two completely, because CSS can't exchange the real order of elements.

  3. give a more exact and much richer presentation to elements as was done in HTML 3.2.

  4. assist in making files more degradable.

  5. give basic documents simple structure.

  6. allow one document to have a different presentation in different devices. It is even possible to make aural style sheets for speech synthesizer and raised letter versions to braille and emboss device and create tactile media.

  7. be used in a variety of documents, including XML documents.

HTML 4.0 with CSS offers the possibility to return to the original idea of HTML - to go back to the roots! Extreme HTML 4.0 documents don't have any presentational attributes. All elements and attributes concern structure and linking and possibly embedded elements. Elements and attributes, which only describe presentation are not used (for example, elements FONT, B, I, U and attributes align, bgcolor). Some of them (for example B) are allowed, but not recommended, because the meaning of elements is primary to describe the structure and semantics, not the presentation.

All possible definitions that affect document presentation are commonly linked into separate files using format <LINK rel="stylesheet" type="text/css" href="stylesheet.css"> as in this example document ([M][S][Pw]):

<LINK rel="stylesheet" type="text/css" href="stylesheet.css">
Title text</TITLE>
The header</H2>
The first paragraph</P>
Second paragraph. <A href="html_document.html">Link</A >. The only necessary attributes are href and possible linked objects like images.</P>

In the style sheet stylesheet.css is a description of how the element H2 should display. This document (the one you are reading) also uses a style sheet.

CSS is a powerful way to replace HTML 3.2 presentational attributes while offering a richer presentation than HTML 3.2 could ever create. This is achieved simply, with a little code included in the document. CSS documents load quickly, but can be made very attractive when displayed on CSS-compliant browsers. The display is poor, however, on browsers which don't understand CSS. Old browsers, for example Netscape 3.x see pages almost like the first Internet browsers. That means HTML 4.0 strict!

Even if structure is described primarily in the document, it can be affected with CSS. Because declarations of element presentation are kept primarily in external files, the presentation of the whole site is easy to change!

It is however possible to make loose, HTML 4.0 transitional documents. They can have HTML 3.2 level elements and attributes, which are not used in HTML 4.0 strict. In fact some HTML 3.2 attributes are easier to use as to define corresponding CSS. Normal documents, which I write are always transitional documents.

This document almost strict, because I have used in the actual content of this page primary those elements and attributes, which are mentioned in HTML 4.0 strict.dtd (instead in individual links and links sets I have used such elements and attributes, which don't belong to the strict document types including the attribute target to the link element A; you read about the last mentioned attribute from the Footnote 2[S][Pw]). How old browsers can display this document depends on the default settings of the browser and exchanges, which the user has made to them. Test the difference! Compare a file with style sheets ([S][Pw]) and without it ([S][Pw]). The latter is like a HTML 2.0 document.

Note. HTML 4.01 (the fixed version of HTML 4.0) and CSS2 specifications are designed as implementable. Browsers should work as far as possible so, that specification, which they support can be implemented. We must however remember that specifications are under development and between them must be some kind of priority order.

If there are some conflicts between specifications, browsers should work according the newest specification, which they support. Older specification are supported as far as they can be implemented without causing conflicts with newer ones.

Because the basic idea of CSS is the possibility to define presentation elsewhere (for example from separate files), CSS must have priority to the relation with HTML, if both HTML and corresponding CSS has been given or if some HTML-element or HTML-attribute overall handle with some way the same presentational features as CSS.

In this site, I try to explain the following matters:

  1. What style sheets are (this page).

  2. Where style sheets can be defined (page 2). I give some practical examples how to create simple style sheets.

  3. Possible units and color values (page 3).

  4. When user agents (commonly Web browsers) handle style sheets in the rendering process (pages 4-5).

  5. Page layout details (fonts, anchors, links, backgrounds, borders and lists; pages 6-9).

  6. How to control document structures (pages 10-11).

  7. A glimpse to the future (page 12).

The last section handles after HTML 4.01 published XHTML-specifications and and XML. If you don't write XHTML or XML-documents you can skip the page and go directly to the page 2.

John Allsop: The key ideas of CSS[Pw].


Footnote 1. These definitions in CSS1 and CSS2 specifications are inaccurate:

a collection of rules
A set of statements that specify presentation of a document.

A single style sheet doesn't need to have many rules (a collection of rules (the same as a rule set) or a set of statements). It can have only one rule or not at all an actual rule like style="color:blue". But also those kind definitions create logical rules. The definition in CSS2-specification is true, when we interpret words a set of statements at the following way:
A set of statements = one or more actual or logical rules.

Footnote 2. Strict doesn't allow to use refers into frames. A member of W3C said, that frames are not well defined enough in order to belong into the strict definition. I removed one link in order to get this document accepted as HTML 4.0 strict. This document was for a while HTML 4.0 strict. Because I need necessary target-attributes in linking to other pages, I just can't create HTML 4.0 strict documents. I don't even regard as reasonable, that the strict definition doesn't allow the attribute target. Just target-attributes are used in opening new windows (people use normally target="_blank" and I use in this site target="new").