There is two kinds of inline elements. First those kinds of inline level elements, which affect some way to the text. For example B and I belong to them and they are called as inline presentational elements. Most of these kinds of elements have certain semantic meaning. Previous elements can be expressed also with semantic elements EM (emphasized) and STRONG - this kind of elements are called as inline phrasal elements. These inline elements can be nested with each others without any limitations.

These kinds of inline level elements don't create round them rectangular boxes like block-level elements. They look like a phrase in a line. The text can wrap from line to line and it might broke from different places. Inline elements, which affect to the text are commonly used to highlight some parts of the contents.

When I was in the university, some students used a thick yellow felt-tip pen in order to mark their books. I use at the same way the element CODE, which I mark as blue only those markup codes, which can be seen only from the source code - note, that the highlighted texts in this sentence have been marked with inline-level elements (CODE and STRONG).

Also the special linking element A (from the word Anchor) belongs to inline elements. It behaves like elements, which affect to the text, but is has the limitation, that links should not be nested.

The main part of the document is inside of the element BODY. Elements in the document body, which have both start- and end-tags can create complex nested structures. They are like "branches" of the document tree (now you must think about the body as the stem of the tree). At this way the tree symbolizes the essence of documents.

I give next an example of a document tree, which document body has some basic block elements. I have presented the tree also with indented codes, which you can see how elements are nested with each others:

Individual attributes have values. In a HTML 3.2 document the element P can have for example the attribute align="center", which means center this paragraph ():

<P align="center">Here is an example of a paragraph, which have the attribute align="center".</P>

In order to better separate elements and attributes I write elements in upper case (like BLOCKQUOTE) and attributes (like style=" ... ") in lower case characters.

There is however two exception. The document type declaration is in upper case letters because of the common style. That doesn't belong actually to the structure of documents. It is not necessary to the browser. If the declaration has file name, it gives however to the browser the possibility to download the file into the memory of the computer. This information is however necessary for validator services and applications.

The declaration have the exclamation mark in the open delimiter (<!DOCTYPE ... >). W3C has created to standard document types DTD-files (Document Type Definition), where are declared all used attributes and elements, and where are also defined allowed element structures (as I have earlier explained, the definition language in HTML-documents is SGML).

It is like the ear-tag of a cow. The cow doesn't need an eartag, but the owner (and the authorities) needs it. Browsers know them without the declaration, but in principle just the document type declares the language, which the documents has been written.

XML documents might need document type declarations, because the author might made his own declarations. In XML-document is used another declaration (<?xml version="1.0"?>), which correspond the eartags of cows. When I refer to XML-elements I use always lower case characters.

Comments use following syntax, which I have also used in my examples (look at the conceptual scheme):

/* this is a CSS-comment, which should be green with browsers, which can understand CSS-definitions */

Gradually people wanted more and more features, similar to what was available in word processors like Word and WordPerfect. This required additional elements and attributes, which can be seen in HTML 3.2.

In HTML 3.2 all attributes were inside elements and inside of the document BODY, as in previous versions of HTML. Content, structure, and presentations were combined in the same document except for linked images and embedded elements (for example, so-called Java-applets). It was quite easy to build these sorts of documents. The problems lay with static structure and presentation - once such a site has been built, changes made to the site's formatting are difficult to make, especially if there are much elements and attributes, which describe the presentation of documents.

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.

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 ():

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="stylesheet.css">
<TITLE>Title text</TITLE>
</HEAD>
<BODY>
<H2>The header</H2>
<P>The first paragraph</P>
<P>Second paragraph. <A href="html_document.html">Link</A >. The only necessary attributes are href and possible linked objects like images.</P>
</BODY>
</HTML>


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). 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 () and without it (). 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.

Previous page

Sections of page:

Next page

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

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.

Especially the purpose of Microsoft is to create large world-wide databases, which have the possibility to use elements and element patterns as searching criterion. Also mathematical science, chemistry could use own elements. Because there is no limits of possible elements, XML is extensible (eXtensible M arkup Language).

HTML documents have predefined presentations to elements. XML elements don't have any default presentation. Undefined XML element is just nothing! A way to give presentation to XML elements is CSS. If XML-documents use same elements as HTML-documents, the same CSS-file can be used in HTML and XML-documents (I made extra page about this matter).

Another way is XSL (eXtensible Stylesheet Language), which have more possibilities to affect to the structure of XML-document. Microsoft favors it. It gives the possibility to set elements in another order with more powerful way than CSS. It is however remarkable, that favoring XSL is partially derived from the truth that the CSS implementation in Microsoft Internet Explorer is not ready. CSS can't give proper presentation to XML document using MS IE browsers.

If the implementation would be better, the case would be different. Shortly - the CSS-implementation of MS IE doesn't fulfil XML-requirements. It is possible to create good presentation to XML documents for example for Netscape 6.x+ and Opera 4.x+ browsers. I handle MS IE 5.5+ in extra page).

The compatibility of XML-documents towards HTML 3.2 capable browsers is depending of the author of the XML document. In the worst case XML-document is to old browsers stick text with some special encoding (read the footnote 1, if you want to know, what I mean with special encoding) - in practice impossible or extremely difficult to read. In fact the author can create his own HTML resemblance language - XML is ideal language to "do-it-yourself " people! XML-document can however be quite readable to old browsers, when all or most elements are same as in the HTML-documents (they don't need however to behave at the same way in XML-capable browsers).

XHTML

An XHTML (eXtensible Hyper Text M arkup Language) document is a special XML-document, which use primary the same elements as HTML-documents. It can be declared either as a HTML or XML document. But XHTML-document must always made according to XML rules, which are in some matters more strict than in HTML documents. First of all documents must be well-formed - it is not allowed to make as much encoding errors as before! Between ordinary HTML-documents and XHTML-documents are for example following differences:

Below is an example of very simple XHTML-document ():

<!DOCTYPE HTML PUBLIC "-//w3c//dtd xhtml 1.0 transitional//en"
http://www.w3.org/TR/xhtml1/"/DTD/transitional.dtd">
<html xmlns="http://www.w3.org/TR/xhtml1/">
   <head> 
      <meta name="keywords"
      content="Opera,Mozilla,Netscape,Internet Explorer,CSS" />
      <title>An example XHTML document</title>
   </head>

   <body>
      <h1>The main header</h1>
      <br />
      <p>Text.</p>
      <p>Text.</p>
      <blockquote>Text inside a block quote</blockquote>
      <ol>
         <li>Text in a list.</li>
         <li>Text in a list.</li>
      </ol>
</body>
</html>

Pages of this CSS-guide are today XHTML 1.0 documents except model pages. It is easy to convert HTML-files into XHTML-files using the HTML Tidy utility, which is HTML-Kit (freeware). If you want to use same CSS-files in HTML, XHTML and XML-document, it is sensible to write names of elements always with lower case characters. I have tried to create my examples so, that they could be used also in XHTML-documents. To use scripts is however problematic, but I have used them like in normal HTML-pages.

W3C: XHTML 1.0 (4.8 Script and Style elements and C.4 Embedded Style Sheets and Scripts), Namespaces in XML.
Other sites: HTML-Kit Home Page.

The next page handle basic methods, how to use style sheets.

Properties create declarations, which means one property with its value or a value set. An individual property definition inside a declaration has the following form: a property name followed by a colon (:) and a value or list of values. But you can define at the same time innumerable quantity of properties, but individual properties and their values must separate with semicolons (;), for example:

color:#660033; background-color:yellow;

Declarations are commonly inside so-called declaration-blocks, which use curly brackets ({}) as their delimiters. Below is the conceptual scheme of the declaration block (the author can set as much whitespace between curly brackets, semicolons and colons as he wants):

The author of the page can define properties in most cases with two ways. He can define individual properties or use so-called shorthand properties, where he combines several properties together. It is common habit to use in backgrounds shorthand properties like this ():

body {background: white url(background_image.gif) repeat-y 2px 0px;}

In the previous example the declaration-block contains only one declaration. You can give the same properties and their values also by using several declarations like in the next declaration-block (I don't explain in this connection, what those properties' mean):

body
{background-color: white;
background-image: url(background_image.gif);
background-repeat: repeat-y;
background-position: 2px 0px;}


Even if that style attributes are limited to element level, the usage of the style attributes have some some basic level differences to presentational HTML 3.2 attributes:

1. CSS-definitions can be much richer. HTML 3.2 presentational attributes (there are also other kind of attributes) can have only single value at a time but CSS doesn't have this limitation.
2. You can give to a certain element a limited quantity of attributes. This limitation is not in CSS-properties. They are not element dependent like HTML 3.2 attributes, but in certain circumstances some properties are discarded (I handle these kinds of situations in other pages in individual connections).

Even if style attributes are the less powerful way to use CSS-properties they are however useful for example in situations, when the author wants to define into a certain element the absolute position. Following properties give to the image 120 pixel position from the top of the HTML-document. You can add more properties into the style attribute or use HTML 3.2 presentational attributes in order to give more adjuncts to the element ():

<IMG src="../Kuvat/Css/omakuvaIso.gif" style="position:absolute; top:120px;">

Use style attributes with consideration! Think first, if you really need them or could you still use some other method.

Previous page

Sections of page:

Next page

Footnote 1. The problem of the term inline style sheets (or rather inline styles) is that the word inline is commonly used as opposite to the word block. Both describe the natural behavior of elements. If the term could be consistent with this use of the word inline, inline style sheets should be used only as inline-level elements, for example from the element EM. It could fit best to the element SPAN, which is particularly designed to inline-level style and language passing.

In this case the term inline styles the word inline doesn't describe the behaviour of elements. It means simple style sheets, which are inside the document body in style attributes (style sheets are embedded to the source code). When I asked about this matter, I got the following answer:

The expression inline styles sounds relative good. Indeed for the people like me, who don't speak English as their native language, the different usage of the word inline might cause confusion. I write also about element-level style sheets.

The effects are in both case quite the same as some HTML 3.2 presentational attributes. Using external CSS-files it however possible do the same effects as HTML attributes without using any attribute in the body parts of HTML-documents.

When you use external files, give to the file name like basic_stylesheet.css and link it to your HTML-document. Below is an example of the format of the link relation:

<LINK rel="stylesheet" type="text/css" href="styleSheetFile.css">

The code must be in the HEAD-part of the document. You can link to your own folders by using relative references or use for example core stylesheets of W3C. Below is an example of a link one of those style sheets:

<LINK rel="stylesheet" type="text/css" href="http://www.w3.org/stylesheets/Core/Modernist">

External style sheets should not have any HTML-encoding! Don't put any HTML tags or comments to them. Below is an example of very simple external CSS-file:

/* Don't use HTML-comments. Use instead of them CSS-comments. */
body {color:#333333; background-color:aqua}

I recommend that you validate CSS-files with the W3C CSS-validator. It can be installed also as an offline version to HTML-Kit but I have found, that it doesn't work properly.

W3C: CSS validator.
Other sites: HTML-Kit Home Page.

It is possible to refer external style sheets also by using the import (at-)rule. I explain in the next section of this page, how to use it. I give you also some examples, how to use external linked style sheets.

Embedded style sheets + the import rule

Embedded style sheets mean sheets, which are "embedded" to the same document before the element BODY between <HEAD></HEAD> tags using the element STYLE. We can call them as document-level style sheets.

I recommend to put into those definitions properties, which you use only in one document. You can override properties in external CSS-files. If you for example want to use in a certain document different background-color and background-image properties, define only them. You don't need to define another time all values. They stay in use, because the browser handles first the linked style sheet.

Following examples gives to the document yellow background with a new background image, which is in the center of the document and which doesn't repeat (you can see in this example also the right position of the element STYLE and it does have also a link relation to the external style sheets, where the document gets other definitions ():

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<LINK rel="stylesheet" type="text/css" href="external_stylesheet.css">
<STYLE type="text/css">
<!-- /* these definitions are inside HTML comments that's why that old browsers could pass them */
body {background: yellow url(new_image.gif) no-repeat center;} /* I explain in other connection, how to define background properties */
-->
</STYLE>
</HEAD>
<BODY>
...


The other way to use the import rule is to put it in the beginning of external style sheets like in this example:

/* external_stylesheet.css - this is the main stylesheet; it is good habit to put a short description to the beginning of the style sheet about the contents of the style sheet */
@import url(another_external_stylesheet.css);
body {...} /* other definitions as usually */

Remember always, when you use the import rule, that the import rule is handled before other definitions. If there are several import rules they are handled in order starting from top. The basic idea of the import rule is that the browser reads imported style sheets as if they have been directly written in the place, where the import rules exist.

Units and keywords

In the size definitions of CSS-properties use either numeric units or certain keywords, which replace numeric units. Keywords are different to various properties and I handle in this page only common units and and keywords to font definitions.

In HTML 3.2 documents is only one exact unit and that is pixel on the screen like width="300" - the unit is not mentioned because it is always the same. Texts have relative units, because it must be scalable. Following keywords xx-small, x-small, small, medium, large, x-large, xx-large (for example small {font-size:x-small;}) have the same task as HTML 3.2 level size values (for example <FONT size="3">) and they can be used only to font sizes.

Font-related elements like other elements can use numerical units. As the possible decimal delimiter in numerical values is used dot. Numerical values need almost always the unit (otherwise as HTML 3.2 attributes) if values are somehow related with width and height values (the numerical value can express also some other matters, when they don't have units). The only exceptions are the line-height property (it is enough to put for example line-height:1.2) and the value 0.

Some properties can get a web address as their values. Values can be inside quotation marks, but it is not necessary (url("gif.gif") or url(gif.gif)). Quotation marks (' or ") are necessary, if names have spaces (for example font-family: "Times New Roman") and properties, which can have strings as their values (content: "this is a string";).

Concerning numerical units, some of them are relative and some absolute. The unit em is relative to the default font size of the surrounding element (it is so-called parent element; I handle this matter in other connection, but also this matter base on the position of the element in the document tree).

The same kind of unit is ex, which the specification says:

ex: the 'x-height' of the relevant font.

It is also possible to use percentage values like big {font-size:120%} to almost any element.

The problem of relative values is, that they are an-exact. The advance of relative units is that the user can increase or decrease the font size. That's why it is recommend to use relative units in basic font definitions. Look at a model, where I have used several relative units).

It is possible to get better control by using absolute units. Following units are according to the CSS2 specification absolute (possible decimals are separated with a dot):

• in = inches
• cm = centimeters
• mm = millimeters
• pt = points - 1 point = 1/72 inch = 0,353 mm (printed, but not necessary on the screen, where it might be for example 1/96 depending the platform and screen resolution).
• pc = pica - 1 pica = 12 points = 4,24mm

The specification tells, that px (= pixel) is relative to the viewing device (in the previous model was one paragraph, which use this unit). It is in principle relative unit concerning printing but absolute unit on the screen. The CSS2 specification recommends that browsers would count pixels also in printing as absolute values and browsers do so.

Pixels are reasonable in certain situations, when the font size must be fixed. For example link lists, which are made in table cells or narrow frames need absolute font sizes.

Absolute units are best in pages, which have special style sheets for printing (needs supporting of the media rule). The printed version can be drastically different as the screen version. The unit pt is intended just for printing. The equal rendering can be guaranteed by using in, cm an mm values to all browsers, which support printed media.

Colors

It is possible to give colors with many ways. I recommend to use those two methods, which are also used in HTML-attributes (for example <BODY bgcolor="white" text="#3f3f3f" link="#3f3f3f"> - CSS supporting browsers use them if corresponding CSS-properties are not defined):

1. Named colors as keywords (for example strong {color:red;}). Remember however that even common used 16 color names (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow) are platform dependent.
2. So-called hexadecimal values (= numbers 0-9 + characters a-f), which have in front of the definition sign # like p.special {color:#070e0e;} (). Six digits' hexadecimal values correspond 24 bits (about 16,7 million colors) RGB-values (red-green-blue). Hexadecimal values can be expressed also shorter with three digits like {color:#00e;} (same as {color:#0000ee;}) , but then it is possible to use less colors.

Some people would however like to use RGB-values. In the following example all declarations mean the same color ():

em {color: rgb(255,0,0) } /* RGB colors 0-255, it is possible to use always three digits, in this case 255,000,000 */
em {color: rgb(100%,0%,0%) } /* RGB colors 0-255 with nearest percentage values - note, that this system is not as exact as previous method */
em { color: red; } /* corresponding keyword */

W3C: CSS2: 4 CSS2 Syntax and basic data types, 4.3.6 Colors.

Special units

CSS specification has brought to the use of hearing defected people so-called aural style sheets and special units for aural devices (angles, times & frequencies). I'm not familiar with them, because in my mind they are today as future visions. They might be used with ordinary style sheets, when it is possible to exploit sound cards.

W3C: CSS2: 4 CSS2 syntax and basic data types, 4.3 Values, 17 Tables, 7.7 Audio rendering of How to set CSS for table elements, 19 Aural style sheets.

CSS makes possible dynamic presentation updating. In embedded CSS the "database" goes with the document. It doesn't fulfil the idea of dynamic presentation updating in other way than the embedded CSS gets from server-side scripts from some external file.

In order to find pairs in the "CSS-database" and the current document, the browser needs so-called selectors. They select, what element or elements get defined CSS-properties. I introduce you in these pages into basic CSS2 selectors (like universal selectors, (element) type selector and class selector) and pattern matching rules.

W3C: CSS2: 5 Selectors; 5.1 Pattern matching.

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 ():

*{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). 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;
text-align:justify;}

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):

Rules are called also as rule sets and statements. Exactly written rules are statement-blocks (or block-statements look at also the Footnote 1). 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 ():

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.

Grouping

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 ():

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) */

Previous page

Sections of page:

Next page

Class and id selectors (like attribute What are selectors, classes and id-attributes, which I handle later) have higher weight as bare element type selectors. According to the HTML specification the name of the id attribute should be document-wide unique. The id attribute has been called also as the fragment identifier. In principle an id-attribute works as as an unique identifier of some fragment of a web page.

It is however remarkable that CSS-capable browsers accept in CSS the same value of the id-attribute in several places in a document. In practise id selectors could be used (against HTML-specifications) in several places in the same document together with class selectors. In this case classes would define common properties and an id selectors would specify exceptional properties. Indeed the problem is that if documents are intended to check with some validator services, they complain errors. The same result can however be achieved by using for the same element several classes (I give an example further).

You can give quite freely names to class and id-selectors, but there is however some limitations:

• The name must start with a normal letter (a-z,A-Z). Accepting the underscore (_) has been afterward added into CSS2.

• You can use also number + hyphen, but you can't start with them.
• Names are case-insensitive in HTML and case-sensitive in XML.
• If you want to use special character, you must put the escape character \ (backslash) before them like w\?. In theory it is also possible to use ISO 10646 characters 161 and above as a numeric code. It is possible to use character references inside style attributes (like style="voice-family: D&#252"), but these don't work in external files or inside the element STYLE (they need escaped characters with backslashes).

In fact in this way the element has always two or more identifiers. First the element type name (P) and second the class name red. These two identifiers are combined together. If the class is connected to the universal selector, in practice the element can be identified from the class name (the universal selector doesn't select any specific element).

.red {color:red;}

This rule can be used (almost) into any element by putting class="red" to the start-tags of elements. Remark however, that syntactical the class selector is always connected into another identifier and rule.

In a way class selectors are attribute selectors, which use dots as separation marks (I give some examples later). CSS2 gives the possibility to use pure attribute-based selection method by using generic attribute What are selectors, classes and id-attributes, which can be understand as actual attribute selectors. In principle any attribute and its value(s) work as identifiers. Because class is in the semantic meaning an attribute, it should be able to express like any other attribute. I handle next attribute selectors.

It is possible to give for same elements several classes by adding spaces (for example class="a b c"), for example:

I don't however regard that kind of practise as very good. Properties might be contradictory. Browsers get additional work and the author of the CSS might get easily confused. If they are intended to use, the author must be especially careful.

Attribute What are selectors, classes and id-attributes

Generic attribute selectors are primary designed for XML-documents in order to ensure that CSS can be used with any XML-based language (some language require supporting of them). According to CSS2 rules like *.red {color:red;} and p.red {color:red;} are intended to use only in HTML-documents. In XML-document should not use these kinds of connected rules. In XML-document should be used universal selectors, element type selectors, attribute selectors and combinations of them.

Because XML is a meta language elements and attributes (except some basic XML-attributes) don't have any default behavior or task. Elements and attributes must be able to identify as such. Even if rules like .class {} and #id {} (I handle the latter rule type further) don't belong to strict XML-based languages browsers, which support XHTML are expected to support them. In XML-languages rules, which have the formats .class {} and #id {} should not be automatic accepted. The same concerns also the CSS, which is inside style attributes. They should work only if the used document type supports id, class and style attributes at the same way as in HTML.

Attribute selectors use brackets ([]). Attribute selectors use attribute names and attribute values as identifiers. They work together with other selectors like in these examples ():

[href] {color:blue} /* according to this example all elements, which have the attribute href got blue color; only the attribute name is used as the identifier */
[class="example"] {color: blue;} /* every element, which have the class-attribute example got blue color; In this case the attribute name and the exact value is used as identifiers */
[class~="red"] {color:red;} /* every element, which have the class-attribute red, got red color; ~-sign is not necessary in this case; it can be used if class attributes have space separate list of values, for example class="green red" (the rule in this example concerns also this attribute) */
*[src] {background-color:blue} /* every element, which have the attribute src, get background-color blue; Note, that I have put in this case the universal selector (*) even if it is not in principle necessary */
span[class="example"] {color: blue;} /* the SPAN element, which have the class-attribute example get blue color; - Note that, the element type selector is attached to the attribute selector; Space between them exchange the meaning of the rule to this: SPAN elements, which follow an element, which has as an attribute class="example", got blue color (I explain later more carefully these kinds of rules) */
p[class~="red"] {color:red;} /* those P elements, which have as a class-attribute red got red color */

If class selectors are expressed as attribute selectors, they should have the same specificity. If there is two kind of definition, just the order of rules should matter like in these cases:

.test {color:red}
*[class="test"]{color:blue} /* this rule has the same priority as the previous rule, but it is after it and then overrule it; Some MS IE browsers understand this as an universal selector */
p.test {color:olive} /* this rule overrule the previous rule, because this is more specific */
p[class="test"]{color:green} /* this rule has the same priority as the previous rule, but it is after it and then overrule it */

You can look at more examples from the error page, how browsers should work.

Id-selectors have higher weight than than attribute selectors. Then for example #p123 {...} is more specified than [id="p123"] {..} even if they match to the same place in the body of the document like <P id="p123">) like style="color:#660033; background-color:yellow;". This matter have any meaning today, but thinking about future, this is worth to keep in mind (look another example from the error page).

Even if style-attributes don't have actual rules (they have only individual declarations and a single declaration-block), they create in the processing logical rules, which correspond the weight of them. According to CSS1 specification id-selectors have the same weight as declarations, which are inside style-attributes:

A declaration in the STYLE attribute of an element (...) has the same weight as a declaration with an ID-based selector that is specified at the end of the style sheet.

The CSS2 specification says (6.4.3 Calculating a selector's specificity), that they are considered to be after all other rules. This not a matter of weight but the cascading order, which I handle later.

Pseudo-class is an assistant concept, which gives the possibility to classify elements like by using classes, but in some cases relating to outstanding features of the HTML-document (for example if the link has been followed or not).

Pseudo-element is an assistant concept, which is related to the presentational sub-part of the elements (like the first letter or row) resembling the way, how CSS is related with element type selectors.

In CSS2 special pseudo-classes are also :left and :right. They are used in page breaking (those rules don't work today in in many browsers, but in future they are very useful).

W3C: CSS2: 13 Paged media, 17 How to set CSS for table elements (.
Other sites: John Allsop: Kinds of Selector.

Common

In order to construct CSS-files it is necessary to understand, in which order browsers should read CSS-properties.

This relationship describes a simple document tree:

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:

Inheritance

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.

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.

Contextual selectors or matching patterns base primary on the bilateral relationships of elements and the relationships are described with the family metaphor. On the background of this method is also the document tree. But otherwise than in the automatic inheritance, pattern matching works like key and keyhole principle. According to the name they take account the context. Certain style is applied only to elements, which are in the right place or they have certain parent element.

In fact a simple universal or element type selector is a matching pattern. In order to separate simple selectors from complex selectors, I mean as matching patterns those kinds of rules, which have at least two conditions. An example of a very simple matching pattern ():

table p {color:green;} /* the latter condition is called as descendant selector; in these kinds of patterns, it is remarkable, that the left round bracket ({) must be in the same row as the pattern, because I have found that patterns don't work if it is another row */

According to this rule, all paragraphs, which are inside tables and then are descendants of the element TABLE, got the property color:green (paragraphs are inside the start-tag and end-tag of the element TD).

I use often these kinds of matching patterns, when I define list-images to unordered lists (UL). If you use grouping, you can create with same declaration exact properties to several level of lists. Below is an example of this kind of solution ( - there is also models of the next examples):

ul li, ul li li li { /* in this example I have is defined first and third level lists and they get green list-images (I explain in other connection allowed properties for lists) */
list-style-type: disc;
list-style-image: url(pallo-vihrea.gif); /* vihrea = green */
list-style-position: inside;
margin-left: -10px; }

ul li li { /* according to this rule, second level lists got red list-image; if this list-marker is not defined, it gets the value from previous rule set and it would get green images! */
list-style-type: disc;
list-style-image: url(pallo-punainen.gif); /* punainen = red */
list-style-position: inside;
margin-left: -10px;}

It is also remarkable to remember that the length of the pattern is not the only meaningful factor. When I designed the list test, which I have mentioned, I made an error. I had not found all mutual relationships of different rules. I try to sketch them to you by this example:

li ol+ul {list-style-type: disc; /* according this rule the list-image should be red; It tested it with a preview-version of Netscape 6.x */
list-style-image: url(./Css/Kuvat/pallo-punainen.gif);
list-style-position: outside;}

ul li {list-style-type: disc; /* the previous rule don't remain in use, because the shorter pattern UL LI cancels it and redefine list-elements; It just continues at the point, where the latter definitions ends! */
list-style-image: url(./Css/Kuvat/pallo.gif);
list-style-position: outside;}

li ol+ul li {list-style-type: disc; /* in order to get the second rule in use, it must continue with an additional element LI - now Netscape shows the desired image! */
list-style-image: url(./Css/Kuvat/pallo-punainen.gif);
list-style-position: outside;}



The most exact matching pattern could be created by combining element and attribute What are selectors, classes and id-attributes.

Cascading order is a part of the What is the processing order of CSS. In my mind it could be also written about cascading What is the processing order of CSS. Cascading order is connected to the pattern matching. The whole system can be simplified into tree main factors:

• Inheritance (in CSS1 level only as automatic system + in CSS2 level also "forced inheritance")
• All kinds of selectors with another selectors are matching patterns
• Cascading order

Because these three factors are whole time in work, it is impossible to present a common model, which could describe, which definition is more specific than other. It is only possible to give some practical examples or general guidelines. The author must think in his mind, how browsers make their decisions in individual cases. He must know, what browsers can fulfil and what can't! Remember always also the document tree. Following order gives some general advice, when the effort is from general towards specific. The order might be in individual cases different.

1. Bare universal selector
2. BODY element without a class selector
3. Class-specified universal selector
4. Other Individual element type selector as BODY
5. Other Individual element type selector as BODY with class selector
6. Complex matching pattern, which have also class What are selectors, classes and id-attributes
7. Id selector

Authors certainly want to create as manageable and powerful system as possible and where is minimum need of individual style definitions inside the document body. I give following recommendations:

1. Single common BODY element definition with some common table declarations (I explain the latter in the page How to set CSS for table elements.
2. Concerning document orientated definitions several rules to BODY element with different class and id specifiers
3. Individual font styles have their own rules
4. All other rules are made using matching patterns, which are counted from class specified BODY elements
5. All kinds of specific document oriented definitions are used with care

Important rule

The normal cascading order can override by using so-called !important rule like:

body { color: black !important; background: white !important;}

If the order doesn't meet any other important rules, any afterward given corresponding properties are not taken account. The rule concern primary the cascading order overriding the normal order. But the rule concerns not only the cascading order. Properties, which are given with the import rule override also class, id selector, matching patterns and style attributes to the same element.

Because of the important rule overrides all other rules to an element, it is a certain kind of exception rule (the term is however quite problematic; read the Footnote 1). Authors might override with the important rule definitions, which they really don't want to override! Because the rule might cause much headaches to the authors and extra work to browsers, I recommend to use it extremely cautious.

After handling basics of CSS I handle next closer fonts and how to tailor web sites to different people and medias.

Common

As I have explained in the page What are basic structures of HTML and XML documents, defining font with CSS-properties are problematic concerning compatibility. The basis view is, that how more documents have easily and flexible exchangeable CSS-properties, the lesser documents are compatible towards HTML 3.2 concerning the presentation.

In order to get maximum compatibility, it is necessary to use the element FONT even if CSS-specification mention it in passing.If you define the class font-style1, you can afterward define properties to the element using CSS. Older browsers use instead alternative HTML 3.2 level attributes. Make following codes to the body part of the document ( - the model page includes all examples of this section):

<FONT class="font-style1" face="Arial" color="#3f3f3f">

This kind of method is however toil and HTML 3.2 level attributes are quite modest compared to CSS-properties. You can never get very big compatibility. In a way some level compatibility fulfils the media aims of CSS to offer different presentation to different devices.

Indeed by using attribute selectors existing HTML 3.2 level attributes could be used in CSS-rules. There would be not needed to use special CSS class or id selectors at all. Below is two examples of changing the color of the FONT element by using attribute selectors: ():

font[color="#660033"]{color:blue} /* element FONT, which attribute color="#660033", get the color blue - remember the space rule; If you put a space after the element type selector, the rule says: element FONT, which have a descendant element, which have attribute color="#660033" get the property color:blue */
*[color="#660033"]{color:blue} /* color-attribute can give also as universal; This rule says: any element, which have exactly the attribute color="#660033", get the color blue */

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 ():

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) */ }

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 ():

... {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 */

In CSS2 it is possible to use @media to make different presentation to the screen and printing or into some other devices:

@media print {/* this works at least in MS IE 5.x, new Netscape/ Mozilla and Opera 4.x+ */
body { font-size: 10pt }
}
@media screen {
body { font-size: 12pt }
}
@media screen, print {/* other possible media types: aural, braille, embossed, handheld, projection, tty, tv - note, that the device must identify itself and certain devices need special browsers and it is impossible to test these features before there are necessary browsers! */
body { line-height: 1.2 }
} /* note, that round brackets surrounds ordinary definitions */

W3C: CSS2: 7 Media types; 7.2.1 The @media rule.

If you put the media at-rule inside a single style sheet, the following conceptual scheme describes definition levels. I have used this kind of chart already, but I have added an extra level (the media rule block can have several rules like the declaration-block can have several declarations):

In the previous chart print is so-called media type. The media type information can connect also to the STYLE or LINK elements (<LINK rel="stylesheet" type="text/css" media="print">) or @import at-rule like @import url(print.css) print; (this CSS should be used only when the document is intended to print).

Media groups

The normal screen media like some other media types are continuous media. Media types print and projection are parts of paged media, which is one of the media groups of CSS2.

In paged media the purpose is to control page breaks.

Ordinary paper printing, normal screen media, projection media and some other media types are parts of the What is the visual formatting model of CSS2. CSS2 has also non-What is the visual formatting model of CSS2s and special medias for aural handicapped people. Those are aural rendering model (for speech synthesizer) and tactile media.

In addition is taken account, if the device can render graphics. Or can the user affect to the presentation of the media or not.

The following list presents CSS2 media groups, formatting models and associated media types, if some media group/formatting model has only one or two media types:

• How to put CSS into Web pages
• Aural rendering model - the media type aural
• Tactile media - media types braille and emboss
• Paged media - continuous media (this matter concerns if pages are broken using page brake rules or not)
• Interactive - static (can the user change the appearance of the page or not)
• Grid - bitmap (in the previous situation the screen use so-called fixed-pitch character grid and graphics is not supported; The latter media group can use also proportional true type fonts and render graphics)

The relationship them to media groups and illustrate this table, which I have taken from the CSS2 specification (N/A means that this possibility is not applicable in certain circumstances):

Special at-rule for font types

In order to tailor different visual medias, CSS2 gives the possibility to download fonts using @font-face rule. Below is an example from the pages of W3C:

@font-face {
src: local("Helvetica Medium"), /* the browser tries to find this font from installed fonts */
url(http://www.fonts.org/sans/Helvetica_family) format("truedoc"); /* if it can't find it, it tries to download it; If it is doesn't succeed to download it, it use alternative fonts */
font-family: "Helvetica";
font-style: normal}
h3 {font-family: "Helvetica Medium", sans-serif }

W3C: CSS2: 15 Fonts, 15.3.1 Font Descriptions and @font-face.

Internationalization

The user is also taking account by using special language dependent properties. This aim is called as internationalization (it is shortened commonly to the format i18n). It is possible to use at the same row from left and right written text (like Hebrew) by using the direction property, which is handled in the chapter 9.

Other i18n features are handled in the CSS2 specification chapter 12. It handles language depending quotations by using element Q (= quote- look at a model). It is also possible to use special list styles types (I handle lists in an own page).

W3C: CSS2: 9 How to put CSS into Web pages, 9.10 Text direction: the 'direction' and 'unicode-bidi' properties, 12 Generated content, automatic numbering, and lists.

Look at examples from my old presentation page, which I used CSS to define background colors to image links. I made also a separate test page.

If you want that the browser takes account a class for some ancestor or the BODY element (for example <BODY class="body_class">), make this kind of rules using matching patterns:

.own a:hover {color: #dcd2d3; text-decoration: none; background-color: #706a6a;} /* the rule match first to all elements, which have the class own, but next the author gives an additional condition: the rule is applied only to the pseudo-class :hover */
.own table a:hover {color: #dcd2d3; text-decoration: none; background-color: #706a6a;} /* matching rules have more conditions; The rule says: :hover works only inside tables, which have an ancestor element, which has the class own */

Attribute What are selectors, classes and id-attributes

CSS2 offers also the possibility to use attribute selectors. Below is some examples of the usage of them:

a[href] {color:blue} /* this is in practice the same as a:link */
a[id] {color:blue} /* match to anchors, which have identifiers - nice way to mark links to the same page */
a[id="an_anchor_name"] {color:blue} /* match to an anchor, which have a certain name of the identifier */
a[href] img {background:yellow} /* you can also combine element type and attribute selectors making matching patters */
a[href="http://www.server.fi/~somebody/"] {color:blue} /* match to a certain link */
a[target="new"], a[target="_blank"] {color:olive; background-color:yellow} /* links, which open a new browser window are marked differently as other links */

Background properties can give to any element - especially a:hover, a:active, a:focus can be very illustrative using background properties. Read about this matter from following pages (all pages don't have return links - use instead alternative windows):

• Special advances using CSS (replacing JavaScript with CSS)
  
• Navigation
• My Home page (I have used CSS-definitions + JavaScript together)

W3C: CSS1: CSS1 Test Suite; CSS2: 14 Colors and Backgrounds; 14.2.1 Background properties.

The difference can be partially explained, how bordered form control elements (for example SELECT) should be overall interpreted. They are exceptional elements. They can be interpreted as if embedded objects, like the element IFRAME, which has as default frame borders. Browsers don't replace frame borders with CSS. They can be taken off only by defining frameborder="0". The style of frame borders resemble the borders of form control elements when for example the borders of the element SELECT can in principle interpret so, that it has as if frameborder="1", which can't be redefined. In this case CSS-borders becomes outside of normal borders and the element gets double borders. Because most form control elements have in HTML natural borders unlike TABLE and IMG elements, which can define borders with an attribute, borders are exceptional attributes of form elements.

Elements FRAME and FRAMESET should have borders like IFRAME.

Setting borders and background properties for the BODY element causes problems in short pages. The problem is, that without setting the height according to the standard working browsers border and background properties might end just after the end-tag </BODY>. If pages are short the place of the bottom border might vary with some browsers in every page. With background image(s) the result is ugly, because the background image(s) might continue after the bottom border! Concerning just borders the result is nicer, if borders have been set for the HTML element and the element has also height:100%. In long pages the problem is that according to the CSS-specification working browsers border are not necessary in every side of the page because they scroll among the page.

For shot pages might need to define an additional DIV element for the whole document and for it height with percentage values (for example height: 97%) in order to get rid of this problem (alternatively the height value can be set also for the BODY element). If the element DIV has some top and bottom margins scrolling borders are not very big visual disadvantage.

Possible border and background properties for non-replaced elements may cause the situation that rows overlap each others. With replaced elements positive margin, padding and border values should increase the line height so that they always fit to the line.

Vertical margins normally collapse, which cause for example that the same bottom and top margin value for two block level elements cause single single margin value, not double margin.

In HTML 3.2 encoding the positioning of inline and block elements are poor defined by using align and valign attributes. Sometimes they define the positioning of inline elements and other contents inside some block element. Sometimes they define the position of the block element itself in relation to the surrounding parent element.

Concerning horizontal positioning these two matters are totally separated from each others. The property text-align concerns all inline-level contents, which are inside block elements. Then text-align:center means the centralization on inline elements and inline-level content. This property should not affect to the positioning of block-level elements and it has no effect to inline-level elements.

The definition margin:auto should cause centralization of block-level elements in the horizontal direction but not vertically.

The vertical alignment has the property vertical-align (possible values are: baseline, top, bottom, middle, sub, super, text-top, text-bottom + positive and negative percent or pixel units (the latter doesn't belong to the CSS1 values). It affects normally inside block boxes to the vertical alignment of inline level elements. Inside table cells it has the same task as the valign attribute (only values top, middle and bottom can be used). By setting for an individual cell/entire table some height and a cell the valign attribute or the vertical-align property it is possible to center elements vertically. If for the BODY and TABLE elements have been set as the value of the height 100% or a little bit less the element can approximately set vertically to the center of the page. Indeed the CSS2 specification itself has the problem that vertical centering doesn't work for any block level element.

Below is an example of a block element with some comments ():

p.special
{border:1p solid blue;
text-indent: 3em; /* indents the first row */
margin:10px; /* this is related to the containing block (normally it is the parent element, but not in cases, where elements are absolute or fixed positioned (I handle at that way positioned elements in the page 11)), which have the paragraph; Negative values are allowed; Remember also shorthand properties to margin and padding! */
padding:10px; /* padding to the text, which is inside the paragraph; negative values are not allowed */
text-align:justify; /* horizontal alignment of the text; Other values are: left; center and right */
vertical-align: top; /* this value isn't inherited and it affects to the respective vertical alignment of text and other elements in blocks */
font: normal small-caps 120%/120% fantasy;

Authors may use inline elements incorrectly and put inside inline elements block level elements. Be careful to use correctly inline elements if you want that all blocks are displayed properly. Don't put block level elements inside inline level elements (I handle the usage of elements also in an extra page).

The only elements, which according to (X)HTML specifications you can use both as inline and block level elements are INS and DEL. But you can't used them at the same time as inline and block-level elements.

The content width means a reservation box for some concrete content, for example and image, which has certain width. For example into a block, which has width:200px should fit following elements:

<IMG src="..." alt="..." width="200" border="0">
<DIV style="width:200px; border-width:0; padding:0; margin:0">...<DIV>

W3C: CSS2: 8 Box model, 8.1 Box dimensions, 10.2 Content width: the 'width' property.
Other sites: Web Design group: CSS Properties.

The second problem is that how strict dimensions should be interpreted. With HTML attributes defined tables dimensions are the minimum value. At this way can't do in ordinary blocks. If the content doesn't fit to the given value, rest of the content goes over the borders - in worst case over the other content.

In CSS2 this problem can be solved with min-height, max-height, min-width and max-width. The alternative way is to define overflow:scroll or overflow:auto, when the content, which doesn't fit inside the block can be scrolled.

Instead of huge quantity of layers, it is simpler to set basic CSS for most browser so, that pages work relative well without JavaScript. Browser-specific CSS is just for browsers, which really need it (look at as a model the source code of this page). The need of special CSS is all browsers different because browsers have different bugs.

In addition of matters, which I have explained, users might have toolbars on the right and left. If they have 800x600 monitor, the usable width of the viewport (window) is about 730 pixel.

You can look at also examples in the following pages:

• A model from the page What are selectors, classes and id-attributes.
• Encoding examples from the page What is the processing order of CSS.
• A pattern matching test with lists.
• MISSION FAILED? (an example of using small faces as list markers; no return link to this page).

It is possible to create from lists a table resembling presentations (look a model of an example, which I have already used).

CSS2-C223 new features

Into CSS2 has been added new list style types (for example list-style-type:decimal-leading-zero and list-style-type:lower-greek).

CSS2 brings the possibility to make extra characters and create counters to lists using pseudo-elements (:before, :after) and the content property. I use the content property especially in the printed version of this site.

CSS3 will add some new values (for example radio) to the list-style-type property, because CSS3 will have better support of HTML 4.0 form elements. Also some new content functions will be added.

The purpose of CSS is use not to embed arbitrary string or content into document. The idea of content property is to give the possibility to decorate element by using small images and special characters (for example *). The property makes also possible to show normally hided values of attributes (content:attr()):

blockquote:before {content:"*"; float:left; width:1.0em; height:1.0em} /* * have bee used like a list bullet before the element. */
blockquote:before {content:"*********************"; display:block; text-align:center} /* * has been used like a top border before the element. */
a[target="_blank"]:after {content: " <" attr(href) "> "} /* Addresses of such links, which goes outside of the site have been showed. Around the Web-address has been added some space and characters. */

W3C: CSS2: 12 Generated content, automatic numbering, and lists; 12.6 Markers and lists.

I don't handle in this page more thoroughly CSS2-C223 special features. I list them in the last page. The next page handles tables.

Common

Tables have been used creating basic structures of Web-pages, which they are not originally intended. CSS works better, if the basic structure is base not on tables. It is much easier to crate basic structure using frames, which works well with relative old browsers (for example Netscape 2.x and MS IE 3.02).

If you want to create frame free pages and you keep the percentage of old browsers is relative small, there is an alternative solution. It is easier to create the basic structure using the common block element DIV, which presentation is defined with CSS. I handle them in the page 11. What is the visual formatting model of CSS2. Applying CSS for tables browsers have some generic problems.

This method decrease drastic in modem connections the delay time before anything is rendered on the screen. Indeed the total time to download the page is quite the same, but the page is readable without waiting that the browser read first the whole page. The browser tries as soon as possible to render the viewport (window) area. This method is very useful in large tables, which have much text (an example table).

If you want a wide cell above other cells, you need to define a hidden row:

.hiddenA {width:200px; font-size:0px; line-height:0}
.hiddenB {width:250px; font-size:0px; line-height:0}
.hiddenC {width:100px; font-size:0px; line-height:0}
...
<table>
<tr>
<td class="hiddenA"> </td>
<td class="hiddenB"> </td>
<td class="hiddenC"> </td>
</tr>
<tr>
<td colspan="3">A wide cell.</td>
</tr>
...
</table>

The fast table layout method has also some disadvantages. If a long table has in the end more columns and then some extra cells, the browser ignores them. If table cells have wide images, they don't fit into cells.

Because table-layout:fixed affects in the basic level to the whole layout, if layout base on tables, before every project must think, if it is used or not. I recommend also to avoid nested tables and use instead DIV elements to delimit blocks inside tables.

The functionality of the fast table layout is however reasonable to test in many browsers. The main principle is that exact definitions gives the best results. The alternative solution is to use only DIV elements to build the basic structure of web documents. I handle this model in the next page.

When the browser calculates table dimensions it must take account following matters:

1. Because both the (HTML) border-attribute and the (CSS) border-property affect to the total width value of the table, browsers which understand CSS must take account both border definition ways in order to calculate the width-attribute correct. The fact how in CSS the border-property is related with width-property is nothing to do in this connection. If the width-property would affect to the calculation formula of the width-attribute <TABLE width="100%"> would not be possible to calculate correct.
2. In order to calculate the CSS-property width correctly, the border attribute of the element TABLE table must take account (the width property is the width, which must reserve for the concrete content, for example for an image, which has an exact width value). This matter should not be any problem for modern browsers, which can handle the border-attribute like a predefined set of CSS-properties.
3. Because CSS should be able to define elsewhere for CSS-properties and CSS calculation formulas must have the priority. If both the width-attribute and the width-property has been set, the browser must follow the value and the calculation formula of the width property.